vue官網(wǎng)指出膘魄，可以使用一個空vue實例作為事件中央線二驰！
也就是說 非父子組件之間的通信，必須要有公共的實例（可以是空的）始腾，才能使用?$emit?獲取?$on?的數(shù)據(jù)參數(shù)州刽，實現(xiàn)組件通信 。
舉個例子浪箭。
公共實例文件bus.js穗椅，作為公共數(shù)控中央總線
import Vue from "vue";
export defaultnewVue();
第一個組件 first.vue
import Bus from '../bus.js';
export default {
? name: 'first',
? data () {
? ? return {
? ? ? value: '我來自first.vue組件！'
? ? }
? },
? methods:{
? ? add(){// 定義add方法奶栖，并將msg通過txt傳給second組件
? ? ? Bus.$emit('txt',this.value);
? ? }
? }
}
export default {
? name: 'first',
? data () {
? ? return {
? ? ? value: '我來自first.vue組件匹表！'
? ? }
? },
? methods:{
? ? add(){// 定義add方法，并將msg通過txt傳給second組件
? ? ? Bus.$emit('txt',this.value);
? ? }
? }
}
第二個組件second.vue
import Bus from '../bus.js';
export default {
? name: 'second',
? data () {
? ? return {
? ?}
? },
? mounted:function(){
? ? Bus.$on('txt',function(val){//監(jiān)聽first組件的txt事件
? ? ? console.log(val);
? ? });
? }
}
這樣宣鄙，就可以在第二個非父子關(guān)系的組件中桑孩，通過第三者bus.js來獲取到第一個組件的value。
兄弟組件之間與父子組件之間的數(shù)據(jù)交互框冀，兩者相比較流椒，兄弟組件之間的通信其實和子組件向父組件傳值有些類似，其實他們的通信原理都是相同的明也，
例如子向父傳值也是$emit和$on的形式宣虾，只是沒有eventBus，但若我們仔細(xì)想想温数，此時父組件其實就充當(dāng)了bus這個事件總線的角色绣硝。
有個問題，就是父子之間傳值或者子父之間傳值是不是都可以用這個方式撑刺？
