VUE3事件总线mitt

下载

npm i mitt

引入

// @/util/eventBus.ts或main.js文件中
import mitt from 'mitt'

创建mitt对象

• 局部创建并暴露

// @/util/eventBus.ts
interface Events {
  [index: string | symbol]: any,
}
export const emitter = mitt<Events>();

• 创建并全局挂载

// main.js
app.config.globalProperties.Bus = mitt()

局部使用

引入mitt对象

// 需要使用事件总线的文件
import { emitter } from '@/utils/event.bus';

基本使用

// 监听事件
emitter.on('事件名',(arg)=>{})
//触发事件
emitter.emit('事件名',arg)

全局使用

引入

import { getCurrentInstance, onBeforeMount } from 'vue'
// 获取到 全局事件总线
const { Bus }   = getCurrentInstance().appContext.config.globalProperties

基本使用

// 监听事件
Bus.on('事件名',(arg)=>{})
//触发事件
Bus.emit('事件名',arg)

其他方法

// 移除监听事件
emitter.off('事件名')
// 清空所有监听事件
emitter.clear()
// 监听所有事件
emitter.on('*',(type,arg)=>{})