vue3父子组件传值

最近在用vue3，遇到了传值问题，记录如下：

• 父传子，在父组件绑定参数，子组件props接收
• 子传父，父组件绑定事件，写方法，子组件定义emits后，用setup解构emit，调用emit("toData",payload)传参

父组件

<template>
    <Test :msg="data.msg" @toData="toData"/>
</template>

<script>
import Test from "./test";
import { ref } from "vue";

export default {
  components: { Test },
  setup(props, context) {
    const data = ref({ msg: "hello vue3" })

    function toData(data) {
      console.log("子组件向父组件传值===",data.value)
    }

    return {
      data,
      toData,
    }
  }
}
</script>

子组件

<template>
  <div>测试vue3组件</div>
  <div>{{ msg }}</div>
</template>

<script>
import { ref } from "vue";

export default {
  name: "test",
  props: {
    msg: {
      type: String
    }
  },
  emits: ["toData"], // 使用ctx.emit("toData")或者不写这行会报错
  setup(props, { emit }) {
    const sonValue = ref("---son---")
    console.log(props)
    emit("toData", sonValue)
  }
}
</script>