Vue3全局组件通信

Vue3全局组件通信

vue3.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 了，不影响我们旧项目的升级使用。

作者：硅谷干货
链接：www.jianshu.com/p/d8d55d8f0… 来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。