全局事件总线 | 任先生的笔记库

如下图所示，子组件和子组件间可以通过共享一个父组件或全局事件总线 / 状态管理库实现数据通信

堂兄弟 🎈 组件间：建议采用共享一个父组件的方案

表兄弟组件间：建议采用全局事件总线 / 状态管理库的方案

兄弟关系图

如下图所示，D 组件和 E 组件是堂兄弟，而 F 组件与 D/E 组件是表兄弟。

# 一、全局事件总线

Vue.js 框架提供了一个全局事件总线（Global Event Bus），也称为 Vue 实例事件系统。

该事件总线允许在应用程序中的任何组件之间进行通信，无论它们是否具有父子关系

注意

在 Vue.js 2.x 及更早版本中，EventBus 是一个基于 Vue 实例的解决方案
在 Vue.js 3.x 及以上版本中，全局事件 API 已经被重构，EventBus 被视为一种过时的模式，应使用新的全局事件钩子函数来代替（或者使用官方推荐的 mitt (opens new window)、tiny-emitte 库）

原因

其实我们细细想来，vue3 去除 EventBus（去除了$on、$off、$once等）也是非常合理的。

在 vue 中，数据共享的方案先如今已经非常多了：

父子间：props、$emit等（vue3 中子传父不能使用$on、$off方式也没关系，反正基本不用）
兄弟间：共享父组件、状态管理库（由于 pinia 的盛行，vue3 中的 EventBus 显得有点多余）
其他：
- 上下游（provide、inject）
- 边界处理（$refs 等）

# 1、EventBus

EventBus 表示事件总线，它实际上是一个 Vue 实例，被用作一个中央事件处理器，所有其他组件都可以通过订阅和发布事件来与它通信。

方式 1

直接 new 一个崭新的 vue 实例对象作为 EventBus

// eventBus.js
import Vue from 'vue'

// 向外共享Vue的实例对象
export default new Vue()

方式 2 👍

在 vm 的原型上挂载一个$bus 作为 EventBus

// main.js
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: (h) => h(App),
  beforeCreate() {
    // 这样vue原型上的$bus就有了和vm/vc一样的方法和属性了
    Vue.prototype.$bus = this
  }
}).$mount('#app')

# 2、数据共享

我们在自定义事件部分已经了解到了：

$on：监听当前父组件为子组件定义的的自定义事件/事件回调
$emit：触发父组件为当前子组件绑定的自定义事件/事件回调

在 vue 中我们可以基于上面两个知识点实现结合 EventBus，就可以实现各个组件间的数据通信了。

下面我们以 HomeView 组件向 AboutWorld 组件表白为例：

AboutWorld.vue

<template>
  <div class="home">
    <h3>AboutWorld组件内容</h3>
  </div>
</template>

<script>
export default {
  name: 'AboutWorld',
  mounted() {
    this.$bus.$on('homeToAbout', (val) => {
      console.log('我监听到你触发了$emit，我收到的数据为：\n', val)
    })
  },
  // 注意事项
  beforeDestroy() {
    this.$bus.$off('homeToAbout')
  }
}
</script>

Send.vue

<template>
  <div class="home">
    <h3>HomeView组件内容</h3>

    <button @click="sendMsg">向AboutWorld表白</button>
    <br /><br />

    子组件内容如下：
    <hello-world></hello-world>
  </div>
</template>

<script>
import HelloWorld from '../components/HelloWorld'

export default {
  name: 'HomeView',
  components: {
    HelloWorld
  },
  data() {
    return {
      interact: '你可以教我包饺子吗？我有点笨，做什么都容易露馅，喜欢你也是~'
    }
  },
  methods: {
    sendMsg() {
      this.$bus.$emit('homeToAbout', this.interact)
    }
  }
}
</script>

# 二、vue 的数据流

# 1、依赖注入 ✨

在父组件只要声明了provide，在其子组件，孙组件，曾孙组件等能形成上下游关系的组件中交互。

无论多深都能通过inject来访问provide中的数据。

提示

这个一般使用较少，如果在 vue 中使用依赖注入，表明当前项目存在大量的组件嵌套，是不利于维护的。

但在 react 中由于高阶组件的存在，使用依赖注入的概率会高于 vue。

<script>
export default {
  // provide 提供给后代✨组件的数据/方法
  // provide: {
  //   message: 'provided by father'
  // }
  provide() {
    return {
      message: 'provided by father'
    }
  }
}
</script>

<script>
export default {
  // 使用 inject 选项来接收由provide提供的、当前组件✨需要的数据/方法
  inject: ['message']
}
</script>

使用示例

provide

<template>
  <div>
    <p>{{ title }}</p>
    <son></son>
  </div>
</template>

<script>
import Son from "./son"

export default {
  name: 'Father',
  components: { Son },

  // provide 提供给后代✨组件的数据/方法
  provide: {
    message: 'provided by father'
  },
  data () {
    return {
      title: '父组件'
    }
  },
  methods: { ... }
}
</script>

过渡：

<template>
  <div>
    <p>{{ title }}</p>
    <grand-son></grand-son>
  </div>
</template>
<script>
import grandSon from './grandSon'

export default {
  name: 'Son',
  components: { grandSon },
  data() {
    return {
      title: '子组件'
    }
  }
}
</script>

inject

<template>
  <div>
    <p>message：{{ message }}</p>
  </div>
</template>
<script>
export default {
  name: "GrandSon",

  // 使用 inject 选项来接收由provide提供的、当前组件✨需要的数据/方法
  inject: [ "message" ],
  data () {
    return {
      title: '孙组件'
    }
  },
  methods: { ... }
};
</script>

拓展：provide 与响应式数据 🤔

通过测试，我们发现修改 provide 中的数据时，inject 中使用的数据并不会响应式更新。

解决方案：

我们使用一些响应式 API 来完成功能：比如 computed 函数

<script>
export default {
  data() {
    return {
      dataToProvide: {
        count: 0
      }
    }
  },
  provide() {
    return {
      dataToProvide: Vue.observable(this.dataToProvide)
    }
  }
}
</script>

# 2、处理边界

$refs：访问子组件的实例

这个可以用于父组件触发子组件方法的场景中

$root ：访问根实例 *
$parent：访问父组件的实例 *

# 3、状态管理库

vuex、pinia、redux

# 二、消息发布订阅

方式 1:

使用上面的 Vue 实例事件系统

方式 2：

使用 pubsub-js 包即可

← 自定义事件 vue插槽 →