vue组件传值之prors和$emit

最新推荐文章于 2024-03-28 14:33:07 发布

小王讨厌洋葱

最新推荐文章于 2024-03-28 14:33:07 发布

阅读量229

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/wsdnnnnnnnnn/article/details/128938683

本文介绍了Vue中通过props实现父传子组件及子传父组件的数据传递，并展示了如何利用状态提升实现兄弟组件间的通信。示例详细解释了父子组件间以及兄弟组件间如何通过$emit和props交互数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue组件传值有很多，这里只说一下使用props和$emit实现父传子，子传父以及兄弟组件之间传值

1.父传子

//父组件
<template>
  <div class="box"> {{ fatherData }}
     <son :fatherData="fatherData"></son>//在子组件标签里面传值
  </div>
</template>
<script>
import son from './son.vue'
export default {
  name: "",
  components: {son},
  data() {
    return {
      fatherData: "我是父组件",
    };
  },
};
</script>

//子组件
<template>
  <div class="container">
子组件--{{fatherData}}
  </div>
</template>

<script>
export default {
    props:["fatherData"],//这里接收父组件传过来的值得时候除数组外还可以利用对象形式,我这里使用数组形式进行接收
    name:'',
    data(){
        return{
        }
    }
}
</script>

2.子传父（使用$emit）

//父组件
<template>
  <div class="box">
    {{ fatherData }}  
//接收子组件传过来得值是在子组件标签里面   这里使用@deliverySonValue（与子组件$emit内定义的函数
//名字保持一致）接收，@deliverySonValue后面引号内是你在父组件里面需要操作子组件传输过来的数据
//的函数，这里定义为deliverySonValue
<son :fatherData="fatherData" @deliverySonValue="deliverySonValue"></son>
  </div>
</template>
<script>
import son from './son.vue'
export default {
  name: "",
  components: {son},
  data() {
    return {
      fatherData: "我是父组件",
    };
  },
  methods:{
//此处获取子组件传过来的值并且赋值给父组件中原本定义的变量
  deliverySonValue(sonValue) {
    this.fatherData = sonValue
  }
  }
};
</script>

//子组件
<template>
  <div class="container">
子组件--{{fatherData}}  <button @click="btn">点击传值</button>
  </div>
</template>
<script>
export default {
    props:["fatherData"],
    name:'',
    data(){
        return{
            sonValue:'我是子组件得值'
        }
    },
    methods:{
        btn() {
//this.$emit('函数名字'，要传给父组件的值)
            this.$emit('deliverySonValue',this.sonValue)
        }
    }
}
</script>

3.利用props和$emit实现兄弟组件之间的传值（状态提升）

思路：现有子组件A和B，两个组件共有一个父组件C，A和B为兄弟组件。若想要将A组件内的一个变量传输给B，那么需要先使用$emit将该变量传输给C，由C使用props将变量传输给B，此时就实现了兄弟组件之间的数据传输。下面看代码（图片中使用箭头标注了数据的流向）

分享就到这里，若有不足请谅解指正，欢迎大家一起交流，谢谢~