Vue3 Sub-component pass data $on is not a function

Question

I am learning vue3.

I want two sub-components to pass data.

index.js

import { createApp } from 'vue'

const bus = createApp({})
export default bus

App.vue

import bus from '@/bus/index'

mounted () {
    bus.$on('maizuo', (data) => {
      console.log('maizuo', data)
    })
}

Uncaught TypeError: _bus_index__WEBPACK_IMPORTED_MODULE_2__.default.$dispatch is not a function

Can someone help me?

Thank you.

Answer 1

I saw from the official website that $on, $off and $once methods are removed from vue 3.

https://v3-migration.vuejs.org/breaking-changes/events-api.html#_2-x-syntax

Vue 3 requires a third-party library to achieve.

index.js

import mitt from 'mitt'

const bus = mitt()
export default bus

App.vue

mounted() {
    bus.on('maizuo', (data) => {
      console.log(data)
    })
  }