Vue开发中的事件总线

在Vue开发中会遇到大量的组件之间共享数据的情形，针对不同的情形，Vue有相对应的解决方案。比如，父组件向子组件传值可以使用props，复杂项目中不同模块之间传值可以使用Vuex。但是，对于一些简单的项目里的非父子组件来说，它们一方面不适用props，另一方面又没有必要使用Vuex，针对这种情形可以使用中央事件总线（Event
Bus）来解决问题。

1、创建事件总线

可以使用多种形式创建Event Bus

• Example 1：

//main.js
import Vue from 'vue'
window.eventBus = new Vue();	//注册全局事件对象
//也可以修改Vue的原型链
Vue.prototype.$event=new Vue();

• Example 2:

// ./event/moduleEvent.vue
<tempalte>
</tempalte>
<script>
	import Vue from 'vue';
	export default new Vue({
		data(){
		}
	})
</script>
//main.js
import moduleEvent from './event/moduleEvent';
Vue.prototype.$event = moduleEvent;

• Example 3:

// Example 2 中创建的eventBus的vue文件改为js文件，main.js不变
// ./event/moduleEvent.js
import Vue from 'vue';
export const moduleEvent = new Vue();
// main.js
import moduleEvent from '../event/moduleEvent';
Vue.prototype.$event = moduleEvent;

2、使用中央事件总线传值

// moduleA.vue
methods:{
	sendData(){
		//通过修改Vue原型链的方式注册
		this.$event.$emit('dataFromA',this.dataA);
		//直接注册在window上
		//moduleEvent.$emit('dataFromA',this.dataA);
	}
}

然后就可以在组件B中接受了。组件B可以与组件A是父子，兄弟等等任意关系。

//moduleB.vue
methods:{
	getData(){
		//通过修改Vue原型链的方式注册
		this.$event.$on('dataFromA',function(data){
			//handle data code
			//回调函数的参数data即为组件A传递的值
		});
		//直接注册在window上
		//moduleEvent.$emit('dataFromA',function(data){
			//handle data code
			//回调函数的参数data即为组件A传递的值
		});
	}
}

3.单次接受事件或者移除事件Listeners

如果只想监听一次该事件。可以使用this.$event.$once(channel:string,callback(payload1,payload2,...))，事件触发一次后将移除事件。
如果想移除自定义事件监听器，可以使用this.$event.$off([event,callback]); 来实现。该方法如果没有提供参数，则移除所有的事件监听器；如果只提供事件，则移除事件所有的监听器；如果同时提供了事件与回调，则只移除这个回调的监听器。