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组件

//BusB 组件

//BusC组件

当BusB,BusC组件之间通信的时候可以使用eventBus,不过我们也以使用状态管理Vuex,通过compunted&watch达到兄弟组件之间的通信，也是官网推荐的一种方式。但如果一个小型项目,没引入vuex,这个时候eventBus也是很不错的选择。

---

vue交流QQ群：576598452




点击加入vue交流QQ群：