vue3.0---父子组件之间传值

father.vue

<template>
  <div>
    我是father父组件
    <child :msg="msg" @sendFn="sendFn"></child>
    <div>
      我是子组件传过来的值：{{subTrans}}
    </div>
  </div>
</template>
<script>
import { defineComponent,reactive,computed,ref } from 'vue'
import child from '@/components/children/child'
export default defineComponent({
  name:'about',
  components:{
    child
  },
  setup() {
    let msg = '我是father向sub传的值'
    let subTrans = reactive({})
    let sendFn= (val)=>{
      console.log(val)
      subTrans.value = val
    }
    return{
      msg,
      sendFn,
      subTrans
    }
  },
})
</script>

child.vue

<template>
  <div>我是sub子组件</div>
  <div>{{ msg }}</div>
  <div>
      <button @click="transFn">点我向父组件传值</button>
  </div>
</template>
<script>
import { defineComponent, onMounted } from "vue";

export default defineComponent({
  name: "subChild",
  props: {
    msg: {
      type: String,
      required: true,
      default: "",
    },
  },
  emits: ["sendFn"],//添加这一行解决
  setup(props,ctx) {
      let childMsg="我是sub，我要传给father"
      let childObj={'name':'sub','value':'zhihui 19'}
      console.log(props.msg)
      onMounted(()=>{
          ctx.emit('sendFn',childMsg)
      })
      let transFn=()=>{
           ctx.emit('sendFn',childObj)
      }
    return {childMsg,childObj,transFn};
  },
});
</script>

画重点：
报错1：

报错2：

vue3.0与vue2.0不同之处：
1.子组件中接收Props里的定义一样，在页面中使用的话直接使用msg就可以了。如果要在setup里获取msg,需要借助setup里第一个参数props.
2.在子组件中将数据提交给父组件 ，需要使用setup里第二个参数ctx.通过ctx.emit(‘sendFn’,childObj)来给调用父组件方法
3.在父组件中，定义子组件调用的方法即可，这个是一样的。注意一点是，在方法里将得到的值输出到页面中，这里是可以动态绑定的，不再需要用vue2.0里的$set方法。但是，注意的一点是，输出给页面中的变量subTrans赋值时，要写成subTrans.value才可以。
在vue3.0中，变量获取值都需要添加**.value这样的书写方法，我已经踩了无数次的坑了。每次都忘 。