前言

在上篇文章中，手写了一个发布和订阅模式，需要写一些公共的代码，比较麻烦；在Vue3的，$on、$off、$once的实例方法已经被移除，大家经常使用的Event Bus无法在使用，这个没有了，那就换一种使用方法，这时候我们使用Mitt库，来帮助我们完成

安装Mitt

npm install mitt -S

全局使用

在main.ts中导入，需要通过app.config.globalProperties来挂载到全局，挂载之后Ts并不会帮我们是声明，需要用declare module 做一下全局的声明，只要是定义全局变量，就在此方法下定义即可，定义完就可以使用全局的Bus了

import mitt from 'mitt'
const Mit = mitt()
declare module 'Vue' {
  export interface ComponentCustomProperties  {
    $Bus: typeof Mit
  }
}
app.config.globalProperties.$Bus = Mit

使用方法

定义A和B两个平级组件，充当于兄弟组件；利用mitt库操作起来就非常简单了，在A组件中，引入getCurrentInstance实例方法，初始化这个函数，注意的是emit传入两个参数，第一个是自定义事件名称，第二个是传入的数据

emit()方法

import { getCurrentInstance } from 'vue';
const instance = getCurrentInstance()
const change =() => {
  instance?.proxy?.$Bus.emit('on-click','A组件派发')
}

B组件接收的时候，也是向引入getCurrentInstance实例方法,然后初始化这个函数，注意的这里是通过$Bus.on接收，第一个参数是接收自定义事件名称，第二个参数是callback回调函数，返回传过来的数据

on()方法

import { getCurrentInstance } from 'vue';
const instance = getCurrentInstance()
instance?.proxy?.$Bus.on('on-click',(str) => {
  console.log('B',str);
  
})

支持传入多条数据

当$bus.emit传入多条数据时候，$bus.on监听多条数据时，使用*号来监听，*代表监听所有的事件触发，callback回调函数就可以返回两个参数，第一个是事件名称，第二个就是传过来的数据

instance?.proxy?.$Bus.on('*',(type,str) => {
  console.log('B',type,str); //B on-click A组件派发
})

off()方法

$Bus.on去监听数据的时候，有监听就有删除，$bus.off来完成这一操作，传递两个参数，一是去取消指定的mitt事件，二是取消的函数，设置$bus.all.clear()可以清空所有的自定义事件