8.父子通信

// 父组件
<template>
  <div>  
    <!-- 使用Hello组件需要提供msg,Hello组件提供了send事件给父组件 -->
    <Hello :msg="msg" @send="test"/>
  </div>
</template>
<script>
import {defineComponent, ref} from "vue"; 
import Hello from './Hello.vue' 
export default defineComponent({
  name: "App",  
   components: {
     Hello,
   },
  setup() {   
    const msg = ref('hello');
    const test =(data)=> {
      console.log(data);
    }
    return { 
      msg,
      test
    };
  },
});
</script>
// 子组件
<template>
  <div>
    <h3>{{ msg }}</h3>
    <!-- 通过emit发送数据给父组件 -->
    <button @click="emit('send',22222222222)">发送信息</button>
  </div>
</template>
<script>
import { defineComponent, toRefs } from "vue";
export default defineComponent({
  props: {
    msg: {
      type: String,
    },
  },
  /**
   * @param props父组件传过来的属性
   * @param context上下文对象
   */
  setup(props, context) {
    console.log("上下文对象", context);
    const { msg } = toRefs(props);
    // 把emit方法从context对象结构出来
    const { emit } = context;
    return {
      msg,
      emit
    };
  },
});
</script>