解决：Vue3去掉了this.$on、this.$emit功能

vue2中，可以实例化一个额外的Vue实例，在这个额外的实例上，搭配this.$on、this.$emit自定义监听事件，用于非父子组件之间的监听事件。

随心所欲

今天这样操作的时候发现报错，于是发现Vue3中已经去掉了this.$on、this.$emit这些功能。

心态爆炸

尝试多次无果，于是决心探究原理，自己实现一套这个操作。

还是很简单的

新增一个index.js文件,代码如下：

export default{
    map:{},
    $emit(name,params){
        if(this.map[name]!=null){
            for(let work of this.map[name]){
                if(work!=null){
                    work(params);
                }
            }
        }else{
            console.warn("正在触发无效的监听事件，事件名称为："+name);
        }
    },
    $on(name,work){
        if(this.map[name]==null)this.map[name]=[];
        this.map[name].push(work);
    },
    $off(name){
        delete this.map[name];
    }
}

main.js

import { createApp } from 'vue'
import App from './App.vue'
import myEvent from 'index.js'

const app = createApp(App);
app.config.globalProperties.$event = myEvent;

app.mount('#app');

使用方式：

this.$event.$emit("changeStartMenu");

this.$event.$on('changeStartMenu', () => {
     console.log("触发成功");
});