Vue组件间通信之$emit/$on

一、介绍

一个vue.js肯定是由多个组件组成的，而组件实例的作用域是相互独立的，即不同组件之间的数据无法简单的相互引用。

但是避免不了有时需要相互引用，比如一个父组件包含多个子组件，当父组件更改后需要同时更新各个子组件的数据。

                        

一般组件间有几种关系，像A.vue与B.vue是父子关系，A.vue与C.vue是隔代关系，C.vue和D.vue是兄弟关系，

不同的关系之间可能通信方式不同，比如父组件向子组件传递值经常使用props方式。$emit/$on方式可以应用每种关系。

二、实现方式

通过一个空的Vue实例作为中央事件总线，用它来触发事件和监听事件，实现轻量的组件间通信，包括父子、兄弟和跨级。

var Event=new Vue();  // 在第三方组件
Event.$emit(事件名,数据);  // 在需要发送的组件import第三方组件，并发送 
Event.$on(事件名,data => {});  // 在需要接受的组件improt第三方组件，并接受和处理

具体例子：

1.第三方组件，A.vue

import Vue from 'vue';
export var event = new Vue();

2.需要发送信号的组件，B.vue

import { event } from './A.vue';

bbb: function(){
	event.$emit("signal");
}

3.需要接受信号的组件，C.vue

import { event } from './A.vue';

mounted: function(){
	event.$on('signal', () => {
  			this.getPublishData());
		})
}

C.vue监听了自定义事件signal，因为不知何时会触发事件，所以在mounted或created中去监听，监听完成调用函数去处理。

注：必须需要一个第三方组件，不能将这个vue实例直接放在B.vue和C.vue中。