vue3 setup 父传子，子传父_vue3 setup父子组件传值-CSDN博客

本文链接：https://blog.csdn.net/weixin_44892327/article/details/128605573

文章讲述了在Vue3中如何使用setup函数和props进行父组件向子组件传递值，以及子组件如何通过this.$emit将值回传给父组件。父组件通过属性绑定将值传递，子组件通过监听事件并触发回调函数实现反向通信。

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

vue3父子组件传值

vue3 setup父子传值

父组件把值传给子组件

举例：父组件：子组件
父组件给子组件传值：
<FatherComponent/>

<son-component :generateData="sonComponentValue"/>

我们需要绑定一个值，这个值是子组件那边的（generateData），而sonComponentValue这个变量就是父组件要给子组件传的值，父组件这边要写就那么多
<SonComponent/>
子组件这边就要用到我们的setup去接收父组件传过来的值

export default {
  name: "sonComponent",
  props: ['generateData'],
  setup(props) {
  	let data = props.generateData;
    console.log(props.generateData)
    return {data};//  返回data外部就可以调用data了，注意：setup中不能使用this因为setup在create生命周期之前
  },
  data() {
    return {
      
  }
  },
  methods:{
    
  }
}
</script>

这里注意如果你想要把data 变成一个响应式数据就需要使用到vue3中的reacitive与ref Api
reacitive：用来包装数据结构复杂的数据
ref：用来包装数据结构简单的数据
如果你觉得setup这种写法很麻烦，你也可以去百度setup语法糖会比这个写法更加简洁和方便

子组件把值传给父组件
上面我们用的setup这种是单向传输的方法，所以如果我们需要把值传回父组件，在子组件中我们需要用到**this.$emit()**方法，在父组件中我们需要用到v-on（@）事件监听器
<FatherComponent/>

<transfer-component :generateData="sonComponentValue" @callBackMethod="callBackSonComponentMethode"/>


callBackSonComponentMethode(resultValue) {
      console.log("callBackSonComponentMethode", resultValue)
    },

sendEmits(){
	// this.$emit 的第一个参数是父组件那边事件监听器的名字，第二参数是你要传输的对象
      this.$emit("callBackMethod", "这是子组件的返回值")
    }```