vue3 mitt进行组件通信

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 清空所有。