如何使用将 Vue 2 $on、$emit 事件总线迁移到 Vue3？

【问题标题】：How to use migrate Vue 2 $on, $emit event bus to Vue3?如何使用将 Vue 2 $on、$emit 事件总线迁移到 Vue3？
【发布时间】：2021-04-28 15:03:54
【问题描述】：

如何将此 VueJS v2 代码转换为 v3？

window.Eventing = new (class {
    constructor() {
        this.vue = new Vue();
    }
    fire(event, data = null, subdata = null) {
        this.vue.$emit(event, data, subdata);
    }
    listen(event, callback) {
        this.vue.$on(event, callback);
    }
})();

【问题讨论】：

有一个 Vue 2 到 Vue 3 的迁移指南，其中明确指出 Vue3 不再支持 Vue 作为事件总线的这种用例。 v3.vuejs.org/guide/migration/events-api.html#migration-strategy

标签： vue.js vuejs3

【解决方案1】：

Vue 3 不再支持来自其原型的事件发射 API（包括 $emit 和 $on），但您可以切换到不同的事件发射器库，例如 tinyemitter（适合 CDN 使用）或 @ 987654322@，其 API 与 Vue 2 中的原始 API 接近：

import TinyEmitter from 'tinyemitter'

window.Eventing = new (class {
    constructor() {
        this.emitter = new TinyEmitter();
    }
    fire(event, data = null, subdata = null) {
        this.emitter.emit(event, data, subdata);
    }
    listen(event, callback) {
        this.emitter.on(event, callback);
    }
})();

demo

【讨论】：