vue3组件的父子通信

（1）父传子

在setup函数中有两个参数 第一个参数为props，第二个参数为context

props为一个对象，props接收后，内部包含了所有传递过来的prop数据，context包含了attrs，slots，emit属性，其中emit方法可以完成子传父
父组件

<template>
  <div>
    <Son :msg="msg"></Son>
  </div>
</template>
 
<script>
import {
    
     ref } from 'vue';
import Son from "./son.vue";
export default {
    
    
  components: {
    
    
    Son,
  },
  setup() {
    
    
      const msg = ref('父组件传值')
        return {
    
    msg}
  },
};
</script>
 
<style scoped>
</style>

子组件

<template>
  <div>子组件 {
    
    {
    
    msg}} </div>
</template>
 
<script>
export default {
    
    
    props:{
    
    
        msg:{
    
    
            type:String,
            default:''
        }
    },
    setup(props,context){
    
    
        console.log(props,context);
    }
};
</script>
 
<style scoped>
</style>

（2）子传父

注意vue2中的this.$emit 不在生效 setup函数中没有this ，而在setup第二个参数中有emit方法
子组件

    setup(props,context){
    
    
        context.emit('name','奥特曼')
    }
 
//结构写法
//    setup(props,{emit}){
    
    
//       emit('name','奥特曼')
//   }

父组件

<template>
    <Son @name="name" ></Son>
</template>
 
  setup() {
    
    
      const name = (name)=>console.log(name);
        return {
    
    name}
  },  

总结

• 父传子：在setup中使用props数据 setup(props){ props就是父组件数据 }
• 子传父：触发自定义事件的时候emit来自 setup(props,{emit}){ emit 就是触发事件函数 }