vue3父子组件传值

vue3 setup父子传值

1. 父组件把值传给子组件

举例：父组件： 子组件
父组件给子组件传值：
<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语法糖会比这个写法更加简洁和方便

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

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


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

<SonComponent/>

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