vue3 setup 父传子，子传父

vue3父子组件传值

vue3 setup父子传值

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

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

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

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

exportdefault{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语法糖会比这个写法更加简洁和方便

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

<transfer-component :generateData="sonComponentValue" @callBackMethod="callBackSonComponentMethode"/>callBackSonComponentMethode(resultValue){
      console.log("callBackSonComponentMethode", resultValue)},

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