Vue 使用事件总线 EventBus 实现跨组件(页面)事件传输

使用方法：

建立 EventBus.js 文件，暴露一个空的 Vue 实例，如下：

import Vue from 'vue'
export default new Vue()

在需要通信的两个组件中分别 import

import EventBus from "@/utils/EventBus.js";

通过 EventBus.$emit、EventBus.$on 进行通信，如下：

// A 页面 触发addFolder事件, params参数
EventBus.$emit("addFolder", params);

// B 页面 接收addFolder事件
EventBus.$on('addFolder', (params) => {
  // ...
})

但在使用事件总线 EventBus 时，会触发多次 EventBus.$on 事件，具体原因跟 Vue 的生命周期有关；
解决办法：就是在组件生命周期内，接收事件页面进行事件解绑；在触发事件页面进行事件销毁，如下：

// A 页面 触发addFolder事件
export default {
	methods: {
	  clickAddFolder(params) {
        EventBus.$emit("addFolder", params);
      },
	},
	beforeDestroy () {
		// 销毁事件
		EventBus.$off('addFolder');
	}
}

// B 页面 接收addFolder事件

export default {
	beforeMount() {
		// 解绑事件
		EventBus.$off('addFolder');
	},
	mounted() {
		EventBus.$on('addFolder', (params) => {
      		// ...
    	})
	}	
}

参考链接

解决Vue中事件（eventBus）$on()多次触发问题

vue中eventbus被多次触发（vue中使用eventbus踩过的坑）

EventBus事件执行多次的原因

vue中EventBus被多次触发