1、安装
yarn add mitt
# OR
npm install --save mitt
2、挂载在全局
import { createApp } from 'vue'
import App from './App.vue'
// 引入mitt
import mitt from 'mitt'
const app = createApp(App);
// vue3.x的全局实例,挂载在config.globalProperties上定义全局变量 (与之前vue2的 Vue.prototype.mittBus = mitt();)
app.config.globalProperties.$mittBus = mitt()
app.mount('#app');
3、使用
// getCurrentInstance获取Vue实例
const { proxy } = getCurrentInstance() as any;
// 提交事件 $mittBus.emit('自定义事件名称','数据');
proxy.$mittBus.emit("layoutMobileResize", {
layout: "defaults",
clientWidth,
});
// 接收事件 $mittBus.on('自定义事件名称',data=>{console.log(data);//接收到的数据})
proxy.$mittBus.on("layoutMobileResize", (res: object) => {
console.log('res.clientWidth',res.clientWidth)
initMenuFixed(res.clientWidth);
});
//移除事件 $mittBus.off('自定义事件名称');
proxy.$mittBus.emit("layoutMobileResize");
//清空所以事件 $mittBus.all.clear();
proxy.$mittBus.all.clear();
tip:
mitt 的用法和 EventEmitter 类似,通过 emit方法发送事件,on 方法接收事件,off 方法移除,clear 清空所有。