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 />
