Steps for Vue3 to use mitt for component communication

yarn add mitt

npm install --save mitt

// Standard ES modular import method import mitt from 'mitt'

const app = createApp(App)

// The global instance of vue3.x should be mounted on config.globalProperties app.config.globalProperties.$EventBus = new mitt()

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

import EventBus from '/common/EventBus.js'

/*
 * App.vue
 */
// There is no this in setup, you need to use getCurrentInstance to get the Vue instance import { getCurrentInstance } from 'vue'
import { Mp3Player } from '/common/Mp3Player.js'

export default {
  setup(){
    // ctx is equivalent to this in Vue2.x
    const { ctx } = getCurrentInstance()
    
    // Listen - if there is a new task, play the sound effect ctx.$EventBus.on('newTask', data => {
      Mp3Player.play()
    })

    // You can also listen to all tasks through *ctx.$EventBus.on('*', data => {
      console.log('EventBus come in', data)
    })
  }
}


/*
 * Control.vue
 */
// When a new task is detected, trigger ctx.$EventBus.emit('newTask', data)

import {
    onBeforeUnmount,
    getCurrentInstance
  } from 'vue'

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

    onBeforeUnmount(() => {
      // Remove the specified event ctx.$EventBus.off('newTask')

      // Remove all events ctx.$EventBus.all.clear()
    })
  }
}