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

转载于:https://juejin.im/post/5d035f6b6fb9a07f0052d7de