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')
}