Vue3不支持eventBus，如何实现组件间通信的长尾词？

本文共计598个文字，预计阅读时间需要3分钟。

plaintext+ on, off, 和 once 事件方法被移除。+ 实例上不再实现这三个事件接口（核心是事件触发与监听功能的封装）。+ 2.x 语法，支持 Vue 2.x 实例。

​​$on​​​、​​$off​​​ 和 ​​$once​​ 实例方法被删除。实例上不再实现这三个事件接口（核心就是事件触发与事件监听器功能的封装）。

2.x 语法

在2.x中，Vue 实例可以用事件API（​​$on​​​、​​$off​​​ 和 ​​$once​​）强制附加的处理代码逻辑。这用于创建监听器功能，以创建在整个应用程序中使用的全局事件监听器：

// eventHub.js

const eventHub = new Vue()

export default eventHub

// ChildComponent.vue
import eventHub from './eventHub'

export default {
mounted() {
// adding eventHub listener
eventHub.$on('custom-event', () => {
console.log('Custom event triggered!')
})
},
beforeDestroy() {
// removing eventHub listener
eventHub.$off('custom-event')
}
}

// ParentComponent.vue
import eventHub from './eventHub'

export default {
methods: {
callGlobalCustomEvent() {
eventHub.$emit('custom-event') // if ChildComponent is mounted, we will have a message in the console
}
}
}

3.x 更新

Vue3 从实例中完全删除了 ​​$on​​​、​​$off​​​ 和 ​​$once​​​ 方法。​​$emit​​ 仍然是现有API的一部分，因为它用于触发由父组件以声明方式附加的事件。

第三方库

Vue3不支持eventBus，那么官方推荐的做法是使用第三方库：

​​mitt​​​​tiny-emitter​​