vue兄弟組件之間通訊--eventBus

eventBus

eventBus單獨的事件中心,用來管理組件之間的通訊。

因爲 Vue 實例實現了一個事件分發接口，你能夠經過實例化一個空的 Vue 實例來實現這個目的。而後在組件中，能夠使用$emit, $on, $off 分別來分發、監聽、取消監聽事件。

一. 建立eventBus

其實就是建立一個js文件,默認導出一個vue實例

import vue from 'vue';
 export default new vue();
複製代碼

二. 分發事件

bus.$emit(eventName,res);
複製代碼

三. 監聽事件

bus.$on(eventName,res => {
  //do something
});
複製代碼

四.銷燬監聽

bus.$off(eventName);
複製代碼

---

使用案例： 父組件A，子組件BusB，Bus。BusB組件裏有一個checkbox，當改變checkbox的checked狀態的時候,BusC組件能夠監聽到狀態改變而後作一些事情。

//bus.js
//建立一個空的vue實例 並導出
import vue from 'vue';
export default new vue();
複製代碼

//A組件
<template>
   <div class="bus-A">
   下面是兩個兄弟組件：	
   	<BusB />
   	<BusC />
   </div>
</template>
<script>
//引入兄弟組件
import BusB from './BusB'
import BusC from './BusC'
export default{
   data(){
       return{
       }
   },
   components:{
       BusB,
       BusC
   }
}
</script>
複製代碼

//BusB 組件
<template>
    <div class="bus-B">
        組件B：
        <label>
        選擇checkbox，能夠觸發組件BusC的監聽事件<input type="checkbox" v-model="isChecked" @change="handleCheckbox">
        </label>
    </div>
</template>
<script>
import bus from '../../assets/bus.js';
export default{
    data(){
        return{
            isChecked:false
        }
    },
    methods:{
        handleCheckbox(){
            //分發'getCheckboxStatus'事件
            bus.$emit('getCheckboxStatus',this.isChecked);
        }
    }
 }
</script>

複製代碼

//BusC組件
<template>
    <div class="bus-C">
        組件BusC：
        <p>
        這裏能夠獲得組件BusB的checkbox的值：{{isChecked}}
        </p>
    </div>
</template>
<script>
import bus from '../../assets/bus.js';
export default{
    data(){
        return{
            isChecked:false
        }
    },
    mounted(){
        this.getCheckboxStatus();
    },
    methods:{
        getCheckboxStatus(){
            //監聽'getCheckboxStatus'事件
            bus.$on('getCheckboxStatus',res => {
                //監聽到BusB組件的checkbox的狀態 do something...
                this.isChecked = res;	
            })
        }
    },
    beforeDestroy(){
        //取消監聽'getCheckboxStatus'事件
        bus.$off('getCheckboxStatus');
    }
}
</script>
複製代碼

當BusB,BusC組件之間通訊的時候能夠使用eventBus,不過咱們也以使用狀態管理Vuex,經過compunted&watch達到兄弟組件之間的通訊，也是官網推薦的一種方式。但若是一個小型項目,沒引入vuex,這個時候eventBus也是很不錯的選擇。

---

vue交流QQ羣：576598452

點擊加入vue交流QQ羣：