如何在Vue3中使用全局事件总线eventBus进行组件通信

Mitt库

vue3取消了全局实例的$on,$off，所以可以借助轻量Mitt库实现

200bytes轻量库，进行组件通信，可以跨平台使用，支持批量监听和批量移除。

以下为vue3+ts项目中使用Mitt的方法

import { createApp } from 'vue'
import App from './App.vue'
import mitt from "mitt";
const Mit = mitt()

// TypeScript注册，必须注册ComponentCustomProperties类型才能获得类型提示
declare module 'vue' {
    export interface ComponentCustomProperties {
        emitter: typeof Mit
    }
}'

const app = createApp(App)

// 全局挂载emitter方法
app.config.globalProperties.emitter = Mit

app.mount('#app')

组件A实例中发布事件emit

<script setup lang='ts'>

import {getCurrentInstance} from 'vue'
const instance = getCurrentInstance()

// emit为自定义的发布事件，由于配置过类型提示，会出现 all | emit | on | clear
// emit接受第一个参数为事件名（自定义），第二个参数为传递的值
const emit = () => {
    instance?.proxy?.emitter.emit('mitt-foo','strValue')
}
</script>

组件B实例中订阅事件on，完成组件通信，拿到A组件传递过来的值

<script setup lang='ts'>

import {getCurrentInstance} from 'vue'
const instance = getCurrentInstance()

// on为订阅事件
// on接受第一个参数为事件名（同发布事件名）,通配符*为监听所有，第二个参数接受一个回调
instance?.proxy?.emitter.on('mitt-foo',(params)=>{
    console.log(params);
})
// instance?.proxy?.emitter.on('*',()=>{ console.log('监听所有事件') })

// cancelMitt为自定义的解绑监听事件
const cancelMitt = ():void=>{
    instance?.proxy?.emitter.off('mitt-xiaoman')
    // instance?.proxy?.emitter.all.clear()    // all方法全部解绑
}
</script>