[JavaScript知识库]解决：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){
            console.log("没有找到关于"+name+"的事件，无法触发")
        }else{
            this.map[name].detail=params;
            window.dispatchEvent(this.map[name]);
        }
    },
    $on(name,work){
        let myEvent = new Event(name);
        this.map[name]=myEvent;
        window.addEventListener(name, (event)=>{
            console.log('得到数据为：', event.detail);
            work(this.map[name].detail);
        });
    }
}

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("触发成功");
});

?