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中。