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

Posted 2023-02-22

【中文标题】Vue3子组件传递数据$on不是函数[重复]

【英文标题】：Vue3 Sub-component pass data $on is not a function [duplicate]

【发布时间】：2021-09-25 17:55:56

【问题描述】：

我正在学习 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

有人可以帮我吗？

谢谢。

【参考方案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)
    )