vue3从实例中完全删除了$on、$off和$once方法。这就代表vue2中的事件总线不能在vue3中继续使用了。官方推荐我们使用mitt或tiny-emitter代替，下面来总结下这两个库的使用。

mitt

安装

npm install --save mitt

创建bus/index.ts文件

import mitt, { Emitter } from 'mitt'

// 定义事件和事件对应的类型
type MittEvent = {
    // 事件foo的参数为{a:string}类型
    foo: {a:string},
    // 事件bar的参数为number|undefined类型
    bar?: number
}

const emitter: Emitter<MittEvent> = mitt<MittEvent>()

export default emitter

使用

import emitter from '@/bus'


// 触发一个事件，emit只能传递一个参数
emitter.emit('foo', { a: 'b' })

// 监听一个事件，回调函数的参数也只能有一个
emitter.on('foo', ev => console.log('foo', ev.a) )

// 监听所有事件，毁掉函数有两个参数，type: 事件类型，ev: 参数
emitter.on('*', (type, ev) => console.log(type, ev) )


// 清空所有事件
emitter.all.clear()

// 取消监听foo事件的onFoo函数
function onFoo() {}
emitter.on('foo', onFoo)
emitter.off('foo', onFoo)

// 取消监听foo事件的所有函数
emitter.off('foo')

tiny-emitter

安装

npm install tiny-emitter --save

创建bus/index.ts文件

const Emitter = require('tiny-emitter');
const emitter = new Emitter();

export default emitter

或者引入 tiny-emitter/instance，可以省去new的操作

const emitter = require('tiny-emitter/instance');

export default emitter

使用

import emitter from '@/bus'

// 触发事件， 可以传递多个参数
emitter.emit('some-event', 'arg1 value', 'arg2 value', 'arg3 value');

function func(arg1, arg2, arg3){
    console.log(arg1, arg2, arg3)
}
// 监听事件，接受多个参数
emitter.on('some-event', func);
// 监听事件，只监听一次
emitter.once('some-event', func);
// 解绑事件
emitter.off('some-event', func)