大家是如何进行 非父子组件通信 的？

Question

非父子组件通信问题

{
  inject: ['pageContext'],
  mounted(){
    this.pageContext.A = this
  }
}

所有组件都把自己的实例放到pageContext里面，然后通过pageContext来通信，这样所有组件的关系都被摊平了。
这是我琢磨出来的一种通信方式。因为一些简单的不需要跨页面的通信，使用vuex太麻烦了。请问大家的非父子组件通信是怎么弄的？有使用事件总线的吗？或者有更好的方法？

Answer 1

如果存在共同祖先，可以用provide/inject实现跨组件数据共享
非共同祖先的事件通信可以用mitt、eventBus、pinia

• pinia：全局状态管理（用户信息、主题、通知）
• mitt、eventBus：全局事件通知
• provide/inject：共同祖先的数据空投

非父子组件的通信，使用时需要注意数据链路的问题，链路一定要明确，否则容易出现事件难以定位、状态传输混乱的问题。

比如provide/inject，这是一个祖先空投状态到子组件的方法，若A定义data，它的下级B又定义了一次data，三级组件C使用data数据时就容易数据定位混乱。

参考链接：
vue3使用mitt事件管理
vue3组件跨层级数据传递provide/inject

Answer 2

偷懒一些就 eventBus，你用的应用层 Provide 其实也是类似于 eventBus 的实现。

实际上是需要按照具体业务去分析的。
如果是全局的就放到 vuex/pinia 中，比如说是菜单、用户信息这类的。
如果是一个具体的业务功能，比如说表单组件的校验和数据收集。这种有一个共同祖先组件（非App.vue）的多后代组件是可以用 provide/inject 来实现一些跨组件通讯。

反正简单来说就是尽量控制影响范围。

• 依赖注入 | Vue.js
• #应该在什么时候使用 Store? - 开始 | Pinia

Answer 3

我的是vue3，大多数是通过pinia来实现全局的响应式数据集中共享，pinia基本上写法和vue3 setup一样的写法，少部分通过小型事件通知和回调函数的机制（自己实现一个，尽量用TS类型）

Answer 4

简单,但不规范,难以溯源