在Vue3中使用事务总线

Vue2.x 使用 EventBus 事件总线进行兄弟组件通信,而在Vue3中事件总线模式已经被移除,官方建议使用外部的、实现了事件触发器接口的库,例如 mitt 或 tiny-emitter。
比起 Vue 实例上的 EventBus,mitt.js 好在哪里呢?

首先它足够小,仅有200bytes。
其次支持全部事件的监听和批量移除。
它还不依赖 Vue 实例,可以跨框架使用,React 或者 Vue,甚至 jQuery 项目都能使用同一套库。

项目中引入 mitt

 
1
npm install --save mitt

在main.ts 中引入

 
12345678
import { createApp } from 'vue' import App from './App.vue' import mitt from 'mitt' const app = createApp(App) // vue3挂载到全局 app.config.globalProperties.$mitt = mitt(); app.use(router).mount('#app')

注册自定义事件

 
1
emitter.on(eventType,callback)

触发自定义事件

 
1
emitter.emit(eventType,params)

取消所有事件

 
1
emitter.all.clear()

取消指定事件

 
12
emitter.on('foo',onFoo) //监听 emitter.off('foo',onFoo) //取消

在实际中应用
开启监听

 
123
proxy.mittBus.on('test', (val: any) => { console.log(val, '收到信息'); });

触发监听

 
123
proxy.mittBus.emit('test', { msg:'你好' });
# 代码分享
分享非常实用的Vue自定义指令
评论
sickboybook加加宾克斯
文章5
分类2
标签1