在Vue3中使用事务总线
Vue2.x 使用 EventBus 事件总线进行兄弟组件通信,而在Vue3中事件总线模式已经被移除,官方建议使用外部的、实现了事件触发器接口的库,例如 mitt 或 tiny-emitter。
比起 Vue 实例上的 EventBus,mitt.js 好在哪里呢?
首先它足够小,仅有200bytes。
其次支持全部事件的监听和批量移除。
它还不依赖 Vue 实例,可以跨框架使用,React 或者 Vue,甚至 jQuery 项目都能使用同一套库。
项目中引入 mitt
1npm install --save mitt
在main.ts 中引入
12345678import { 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')
注册自定义事件
1emitter.on(eventType,callback)
触发自定义事件
1emitter.emit(eventType,params)
取消所有事件
1emitter.all.clear()
取消指定事件
12emitter.on('foo',onFoo) //监听 emitter.off('foo',onFoo) //取消
在实际中应用
开启监听
123proxy.mittBus.on('test', (val: any) => { console.log(val, '收到信息'); });
触发监听
123proxy.mittBus.emit('test', { msg:'你好' });
# 代码分享
分享非常实用的Vue自定义指令
评论
即可发布评论!
文章5
分类2
标签1
博客之家
一个优雅的写作平台
一个优雅的写作平台