vue 3.x组件通信方式简单整理

1、props - 父传子

2、事件注册派发 - 子穿父

组合式API中defineEmits注册，子组件派发，父组件监听

3、$attrs

接收没有被props声明的属性，可以在$attrs中获取。

很好的用处是实现属性透传，不需要在中间组件额外声明相关属性:

<child v-bind="$attrs" >

可以用在一些复杂组件封装的场景。

4、ref + defineExpose

通过在父组件获取子组件实例，来调用子组件通过defineExpose 暴漏的方法或状态，来实现通信

5、$parent

可以获取父组件实例，可以调用父组件通过defineExpose暴漏的方法或状态

也可以借助父组件，各兄弟子组件通过获取父组件实例来共享状态数据，实现互相通信

6、作用域插槽

子组件可以通过给插槽传递数据，在父组件中通过v-slot接收数据。

7、v-model  - 父子组件双向通信

8、消息总线的方式

使用mitt等工具库，可实现兄弟组件和跨层级的通信。vue3已经废弃了$bus的写法

9、状态管理工具

vuex、pinia

10、app.config.globalProperties

vue提供的一个可以注册全局可访问属性的对象。

在选项式api写法可以直接通过this获取到对应属性

在组合式API中，可以通过getCurrentInstance()方法获取到{proxy}，注册的全局属性可以通过proxy获取。

11、provide/inject 跨层级通信

12、浏览器本地存储  localStorage/sessionStorage

13、import/export   

14、全局windows - 不建议使用

没有响应式处理，并且不方便销毁，容易内存泄漏