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群：