vue组件传值之prors和$emit

本文介绍了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,此时就实现了兄弟组件之间的数据传输。下面看代码(图片中使用箭头标注了数据的流向)

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值