yarn add mitt

npm install --save mitt

// 标准的ES模块化引入方式
import mitt from "mitt"

const app = createApp(App)

// vue3.x的全局实例，要挂载在config.globalProperties上
app.config.globalProperties.$EventBus = new mitt()

import mitt from "mitt"
export default new mitt()

import EventBus from "/common/EventBus.js"

/*
 * App.vue
 */
// setup中没有this，需要通过getCurrentInstance来获取Vue实例
import { getCurrentInstance } from "vue"
import { Mp3Player } from "/common/Mp3Player.js"

export default {
  setup(){
    // ctx等同于Vue2.x的this
    const { ctx } = getCurrentInstance()
    
    // 监听-如果有新任务则播放音效
    ctx.$EventBus.on("newTask", data => {
      Mp3Player.play()
    })

    // 也可以通过*监听所有任务
    ctx.$EventBus.on("*", data => {
      console.log("EventBus come in", data)
    })
  }
}


/*
 * Control.vue
 */
// 判断有新任务时，触发
ctx.$EventBus.emit("newTask", data)

import {
    onBeforeUnmount,
    getCurrentInstance
  } from "vue"

export default {
  setup(){
    const { ctx } = getCurrentInstance()

    onBeforeUnmount(() => {
      // 移除指定事件
      ctx.$EventBus.off("newTask")

      // 移除全部事件
      ctx.$EventBus.all.clear()
    })
  }
}