vue3的父子组件通讯方式

父组件中

<template>
    <HelloWorld msg="父传子" hh="清华大学"  @childTestClick="childTestClick">                           
</template>

import HelloWorld from "./components/HelloWorld.vue";
export default {
  name: "father",
  components: {
    HelloWorld,
  },
  setup() {
    //父组件接收子组件事件
    const childTestClick = (value) => {
      console.log(value);
    };
    return { childTestClick };
  },
};

子组件中

<template>
   <div>接收父组件传递的值:{
   
   { msg }}---{
   
   { hh }}</div>
   <button @click="clickChild">子組件事件</button>
</template>

export default {
  name: "son",
   //父传子接收
  props: ["msg", "hh"],
   //子传父触发emit事件声明
  emits: ["childTestClick"],
  setup(props, context) {
        //子传父触发emit事件
    const clickChild = () => {
      context.emit("childTestClick", "子組件传值给父组件");
    };
    return { clickChild };
  },
};