Vue3子组件传递数据$on不是函数[重复]

Question

我正在学习 vue3。

我想要两个子组件传递数据。

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

有人可以帮我吗？

谢谢。

Answer 1

从官网上看到，vue 3中去掉了$on、$off和$once方法。

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

Vue 3 需要第三方库来实现。

index.js

import mitt from 'mitt'

const bus = mitt()
export default bus

App.vue

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