一、前言
Vue2.x 使用 EventBus 事件总线进行兄弟组件通信，而在Vue3中事件总线模式已经被移除，官方建议使用外部的、实现了事件触发器接口的库,例如 mitt 或 tiny-emitter。
二、优势
- 首先它足够小，仅有200bytes。
- 其次支持全部事件的监听和批量移除。
- 它还不依赖 Vue 实例，可以跨框架使用，React 或者 Vue，甚至 jQuery 项目都能使用同一套库。
三、使用
1.API
// 创建mitt实例
mitt()
// 事件名称到注册处理程序函数的映射。
all
//触发事件，两个参数：name：触发的方法名，data：需要传递的参数
emit(name,data)
// 绑定事件，两个参数：name：绑定的方法名，callback：触发后执行的回调函数
on(name,callback)
// 解绑事件，一个参数：name：需要解绑的方法名
off(name)
2. 安装
npm i mitt -s
3.声明
main.js
import {
createApp } from 'vue'
import mitt from 'mitt'
import App from './App.vue'
const app = createApp(App)
app.config.globalProperties.Bus = mitt()
app.mount('#app')
4. 传递信息
<template>
<button @click="onclick">按钮</button>
</template>
<script setup>
import {
getCurrentInstance, onBeforeMount } from 'vue'
// 获取到 全局事件总线
const {
Bus } = getCurrentInstance().appContext.config.globalProperties
const onclick = () => {
Bus.emit('Event', {
a: 'b' })
}
</script>
5. 接受信息
Bus.on('Event', (res)=>{
// res 就是emit传过来的数据
console.log(res)
})
6. 监听所有事件
Bus.on('*', (type, res)=>{
// res 就是emit传过来的数据
console.log(type, res)
})
7. 移除监听事件
Bus.off('Event');
8. 清空所有事件
Bus.all.clear();
四、Typescript使用
import mitt from 'mitt';
type Events = {
foo: string;
bar?: number;
};
const emitter = mitt<Events>(); // inferred as Emitter<Events>
emitter.on('foo', (e) => {
}); // 'e' has inferred type 'string'
emitter.emit('foo', 42); // Error: Argument of type 'number' is not assignable to parameter of type 'string'. (2345)
或者
import mitt, {
Emitter } from 'mitt';
type Events = {
foo: string;
bar?: number;
};
const emitter: Emitter<Events> = mitt<Events>();