Vue3全局组件通信之EventBus

全局组件通信

全局组件通信是指，两个任意的组件，不管是否有关联（e.g. 父子、爷孙）的组件，都可以直接进行交流的通信方案。

举个例子，像下面这样，B2.vue 可以采用全局通信方案，直接向 D2.vue 发起交流，而无需经过他们的父组件。

A.vue
├─B1.vue
├───C1.vue
├─────D1.vue
├─────D2.vue
├───C2.vue
├─────D3.vue
└─B2.vue

常用的方法有：

方案	发起方	接收方	对应章节传送门
EventBus	emit	on	点击查看
Vuex	-	-	点击查看

#EventBus

EventBus 通常被称之为 “全局事件总线” ，它是用来在全局范围内通信的一个常用方案，它的特点就是： “简单” 、 “灵活” 、“轻量级”。

TIP

在中小型项目，全局通信推荐优先采用该方案，事件总线在打包压缩后不到 200 个字节， API 也非常简单和灵活。

#回顾 2.x

在 2.x，使用 EventBus 无需导入第三方插件，直接在自己的 libs 文件夹下创建一个 bus.ts 文件，暴露一个新的 Vue 实例即可。

import Vue from 'vue';
export default new Vue;

然后就可以在组件里引入 bus ，通过 $emit 去发起交流，通过 $on 去监听接收交流。

旧版方案的完整案例代码可以查看官方的 2.x 语法 - 事件 API(opens new window)

#了解 3.x

Vue 3.x 移除了 $on 、 $off 和 $once 这几个事件 API ，应用实例不再实现事件触发接口。

根据官方文档在迁移策略 - 事件 API (opens new window)的推荐，我们可以用 mitt (opens new window)或者 tiny-emitter (opens new window)等第三方插件来实现 EventBus 。

#创建 3.x 的 EventBus

这里以 mitt 为例，示范如何创建一个 Vue 3.x 的 EventBus 。

首先，需要安装 mitt ：

npm install --save mitt

然后在 libs 文件夹下，创建一个 bus.ts 文件，内容和旧版写法其实是一样的，只不过是把 Vue 实例，换成了 mitt 实例。

import mitt from 'mitt';
export default mitt();

然后就可以定义发起和接收的相关事件了，常用的 API 和参数如下：

方法名称	作用
on	注册一个监听事件，用于接收数据
emit	调用方法发起数据传递
off	用来移除监听事件

on 的参数：

参数	类型	作用
type	string \| symbol	方法名
handler	function	接收到数据之后要做什么处理的回调函数

这里的 handler 建议使用具名函数，因为匿名函数无法销毁。

emit 的参数：

参数	类型	作用
type	string \| symbol	与 on 对应的方法名
data	any	与 on 对应的，允许接收的数据

off 的参数：

参数	类型	作用
type	string \| symbol	与 on 对应的方法名
handler	function	要删除的，与 on 对应的 handler 函数名

更多的 API 可以查阅插件的官方文档 (opens new window)，在了解了最基本的用法之后，我们来开始配置一对交流。

TIP

如果你需要把 bus 配置为全局 API ，不想在每个组件里分别 import 的话，可以参考之前的章节内容：全局 API 挂载。

#创建和移除监听事件

在需要暴露交流事件的组件里，通过 on 配置好接收方法，同时为了避免路由切换过程中造成事件多次被绑定，多次触发，需要在适当的时机 off 掉：

import { defineComponent, onBeforeUnmount } from 'vue'
import bus from '@libs/bus'

export default defineComponent({
  setup () {
    // 定义一个打招呼的方法
    const sayHi = (msg: string = 'Hello World!'): void => {
      console.log(msg);
    }

    // 启用监听
    bus.on('sayHi', sayHi);

    // 在组件卸载之前移除监听
    onBeforeUnmount( () => {
      bus.off('sayHi', sayHi);
    })
  }
})

btw: 关于销毁的时机，可以参考组件的生命周期。

#调用监听事件

在需要调用交流事件的组件里，通过 emit 进行调用：

import { defineComponent } from 'vue'
import bus from '@libs/bus'

export default defineComponent({
  setup () {
    // 调用打招呼事件，传入消息内容
    bus.emit('sayHi', '哈哈哈哈哈哈哈哈哈哈哈哈哈哈');
  }
})

#旧项目升级 EventBus

在 Vue 3.x 的 EventBus，我们可以看到它的 API 和旧版是非常接近的，只是去掉了 $ 符号。

如果你要对旧的项目进行升级改造，因为原来都是使用了 $on 、 $emit 等旧的 API ，一个一个组件去修改成新的 API 肯定不现实。

我们可以在创建 bus.ts 的时候，通过自定义一个 bus 对象，来挂载 mitt 的 API 。

在 bus.ts 里，改成以下代码：

import mitt from 'mitt';

// 初始化一个 mitt 实例
const emitter = mitt();

// 定义一个空对象用来承载我们的自定义方法
const bus: any = {};

// 把你要用到的方法添加到 bus 对象上
bus.$on = emitter.on;
bus.$emit = emitter.emit;

// 最终是暴露自己定义的 bus
export default bus;

这样我们在组件里就可以继续使用 bus.$on 、bus.$emit 等以前的老 API 了，不影响我们旧项目的升级使用。

点赞加关注，永远不迷路