1. vue2中使用了,很多bus,在有些地方忘记清理了,导致重复事件bug. 对bus进行改造,实现清除遗留. 下面的简单实现.

1.eventbus.js

// eventBus.js
import Vue from 'vue';class EventBusClass extends Vue {constructor() {super();this.listeners = [];}on(event, callback, context) {this.$on(event, callback);this.listeners.push({ event, callback, context });}off(event, callback, context) {this.$off(event, callback);this.listeners = this.listeners.filter(listener =>listener.event !== event || listener.callback !== callback || listener.context !== context);}clear(context) {this.listeners = this.listeners.filter(listener => {if (listener.context === context) {this.$off(listener.event, listener.callback);return false;}return true;});}
}const EventBus = new EventBusClass();
export default EventBus;

2. main.js使用

import Vue from 'vue'
import App from './App.vue'
import EventBus from "./EventBusManage";import ElementUI from 'element-ui';
import * as echarts from 'echarts';
import 'element-ui/lib/theme-chalk/index.css';Vue.prototype.$bus = EventBusVue.use(ElementUI);Vue.config.productionTip = false
Vue.prototype.$echarts = echartsnew Vue({render: h => h(App),
}).$mount('#app')

3.调用测试

发送事件

接收事件1

接收事件2

4.结果

5.成功关闭组件2接收的所有事件