Vue3 使用事件总线

Vue3 使用事件总线

参考文档：

https://blog.csdn.net/qq_52013792/article/details/125803290

Mitt是一个微型的 EventEmitter 库，在Vue3中，官方推荐使用它替代已经移除的EventBus

npm install mitt --save

main.ts 注册

// 引入事件总线
import mitt from 'mitt'

// 安装事件总线
const bus = mitt()
app.config.globalProperties.$bus = bus

B组件绑定事件，回调函数接收参数

import {
    
     getCurrentInstance, onMounted, onBeforeUnmount } from 'vue'
const cxt = getCurrentInstance()
const bus = cxt!.appContext.config.globalProperties.$bus

onMounted(() => {
    
    

    // 绑定事件
    bus.on('printMessage', (message: string) => {
    
    
        alert(message)
    })
})

onBeforeUnmount(() => {
    
    
    bus.off('printMessage')
})

A组件触发绑定事件，传递参数

import {
    
     getCurrentInstance } from 'vue'
const cxt = getCurrentInstance() //相当于Vue2中的this
const bus = cxt!.appContext.config.globalProperties.$bus

function getAreaData(areaData: any) {
    
    
    console.log(areaData)
}

function emitMitt() {
    
    
    // 触发绑定事件事件
    bus.emit('printMessage', '111')
}