1. 父子通信

（1）setup函数提供俩个参数，第一个参数为props，第二个参数为一个对象context

（2）props为一个对象，内部包含了父组件传递过来的所有prop数据，context对象包含了attrs，slots， emit属性，其中的emit可以触发自定义事件的执行从而完成子传父

（3）context:context是一个js对象，这个对象暴露了三个组件的属性，可以通过解构赋值的方式来获取这三个属性

attrs:它是绑定到组件的非props数据，并且是非响应式的

slots:是组件的插槽，同样不是响应式的

emit:是一个方法，相当于vue2中的this.$emit方法，可用于实现子传父

当子组件想要修改父组件数据时，只用使用 this.$emit('update:dataName',

dataValue)这种方式去通知父组件，父组件上不需要做任何操作

（1）父传子

父组件：在子组件上通过 v-bind绑定属性

子组件：通过props接收参数

例：

props:['name1','name2]

或者

props:{

name1:{

type: Number,

default: 0

},

name2:{

    type: Boolean,

  default: false

}

}

(2)子传父

子：

    const changevVisible = () =>{

      context.emit("update:visible", false);

      context.emit('changeValue', '我被子组件改变了')

   }

（vue2中不使用setup()函数，直接在函数中使用this.$emit来发送事件）

父：

<Popover v-model:number="num" v-model:visible="isShow" @changeValue="changeValue"></Popover>

const changeValue = (val) => {

   console.log(val)

}

2.跨多级组件通信

作用：用于父组件向子孙组件传递数据

使用方法：provide在父组件中返回要传给下级的数据，inject在需要使用这个数据的子辈组件或者孙辈等下级组件中注入数据。

使用场景：由于vue有$parent属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过provide/inject可以轻松实现跨级访问父组件的数据

(1) 实现步骤：

顶层组件在setup方法中使用provide函数提供数据

任何底层组件在setup方法中使用inject函数获取数据

(2) 传递响应式数据