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
<br />
<br />
点击加入vue交流QQ群：<a target="_blank" href="//shang.qq.com/wpa/qunwpa?idkey=4f949184519835439e62d3d185c478a67d666cd9b66925a16f329242d5a4f29e"><img border="0" src="https://user-gold-cdn.xitu.io/2019/6/14/16b562f50879b29d?w=90&h=22&f=png&s=1827" alt="vue交流群" title="vue交流群"></a>
<br />