Vue3中事件总线mitt的使用方式

npm install mitt

// eventBus.js
import mitt from 'mitt';
export const eventBus = mitt();

// schedule.vue
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { eventBus } from '@/path/to/eventBus';		// 这个路径需要对应上

export default {
  setup() {
    const search = () => {
      // 在这里执行方法
      console.log('方法被调用');
    };

    onMounted(() => {
      eventBus.on('getScheduleSearch', search);
    });

    // 在页面被销毁的时候，取消监听
    onBeforeUnmount(() => {
      eventBus.off('getScheduleSearch', search);
    });

    return {};
  },
};

// shift.vue
import { ref } from 'vue';
import { eventBus } from '@/path/to/eventBus';		// 这个路径需要对应上

export default {
  setup() {
  	// 假设这是我删除班次的方法
    const deleteShift = () => {
      // 在这里触发事件，通知员工排班页面执行方法。
      eventBus.emit('getScheduleSearch');
    };

    return { getScheduleSearch };
  },
};

npm install --save mitt

import { createApp } from 'vue';

import App from './App.vue';

import mitt from "mitt"

const app = createApp(App)

app.config.globalProperties.$mybus = mitt()

//mybus.js文件
import mitt from 'mitt'
const emitter = mitt();
export default emitter ;

import mitt from 'mitt'

setup(){
 　　const emitter = mitt();
　　 return{
　　　　emitter
　　}
}

//使用
import emitter from '@/utils/mybus.js';
//发送
emitter.emit('getDetail',{name:'张三',age:20});
//监听
emitter.on("getDetail",(val) = >{
　　console.log(val)
})
//取消监听
emitter.off("getDetail")
//如果发送了多个，可监听全部
emitter.on("*",(type,val) = >{
   console.log(type,val)   //type就是类型 之前注册的getDetail
})
//取消所有监听
emitter.all.clear();

export default function mitt(all) {
 all = all || new Map();
 
 return {
  all,
 
  on(type, handler) {
   const handlers = all.get(type);
   const added = handlers && handlers.push(handler);
   if (!added) {
    all.set(type, [handler]);
   }
  },
 
  off(type, handler) {
   const handlers = all.get(type);
   if (handlers) {
    handlers.splice(handlers.indexOf(handler) >>> 0, 1);
   }
  },
 
  emit(type, evt) {
   ((all.get(type) || [])).slice().map((handler) => { handler(evt); });
   ((all.get('*') || [])).slice().map((handler) => { handler(type, evt); });
  }
 };
}