vue3组件常用的通信方式

父子传参props

 引入组件

标签传参

子组件通过defineProps定义一下类型接收参数

子父传参 注册自定义事件，在子组件中通过$emit进行触发从而回传值

父组件向子组件传递方法，使用的是 事件绑定机制；v-on: 当我们自定义一个事件属性之后，那么，子组件就能够通过某种方法，来调用传递进去的这个方法了。

简单理解：父组件通过传递 注册函数方法 给子组件，在子组件中，子组件通过 $emit(“传给子组件的方法名”,xxx) 来把要传的值通过参数传给父组件；

爷孙 provider inject

vue3提供了 祖宗组件==>后代组件 这样一种通信方式

祖宗组件从vue中解构provide方法，并传递数据

后代组件从vue中解构inject方法，调用接收数据

不定层级组件  pina

非父子EventBus

公交车 ==> EventBus

完全没有关系的两个人，可以上同一辆车，这两个人在一辆车上就可以依赖这辆车进行通信了。

定义一个EventBus类，实现单例模式，导出实例对象

哪个组件要接收数据，主动导入这个对象，并调用对象的方法绑定事件，事件函数就在这个组件中，可以通过 参数接收数据

哪个组件要传递数据，主动导入这个对象，并调用对象的触发事件的方法，并传递数据

Ref

父子通信。

不会主动传递，而是父组件强行提取子组件实例对象，其中就有子组件的数据和方法。

子组件通过defineExpose暴露数据和方法

父组件定义ref空数据

给子组件自定义标签上添加ref属性，值是定义ref数据的名称

在挂载阶段，就可以访问ref数据的value属性，就可以代表子组件对象，其中会包含子组件暴露出来的属性和方 法

插槽

父子通信

匿名插槽

父给子传递模板视图。

父组件给子组件自定义标签中，放入一段模板内容

子组件中通过slot标签接收，最终slot标签所在位置，就会被替换为父组件放进去的模板内容。

具名插槽

作用域插槽

透传