简单使用 vue事件总线$bus

我们常常遇到组件之间需要通信的情况。有父子关系的组件，可以通过 props 和 $emit 等通信；但当两个组件间关系很“疏远”时，如果还顺着组件一个一个地传递信息就显得麻烦了，所以可以考虑 vuex 或 事件总线$bus 等这一类“全局”解决方法。

通过使用$bus，可以让A组件发出某一事件，然后在B组件中监听该事件，并执行一些代码（函数）。具体用法如下：

---

添加$bus

先要在 main.js 中给 Vue原型 添加 $bus 属性，并赋值一个新的Vue实例。

Vue.prototype.$bus = new Vue();

发出事件

然后在发出事件的组件的某个方法中添加 this.$bus.$emit('事件名') ，当该触发该方法时，会发出一个事件。

以下是当组件 A的imageLoad 方法被触发时，发出一个 itemImageLoad 事件。

  methods: {
    imageLoad() {
      this.$bus.$emit("itemImageLoad");
    }
  }

监听事件

最后在监听事件的组件中添加 this.$bus.$on("事件名", () => { 函数内容 })，即可监听该事件，并执行回调函数。

如果后面需要取消监听的话，回调函数需要存放在一个变量中。

以下是在组件B的生命周期函数 mounted 中，给组件B注册监听 itemImageLoad 事件。当监听到该事件发生时，执行this.itemImgListener 中回调函数内容

  data() {
    return {
      itemImgListener: null,
    }
  },
  mounted() {
    this.itemImgListener = () => {
         console.log('输出结果');
    };

    this.$bus.$on("itemImageLoad", this.itemImgListener);
  },
}

取消监听

当离开页面想要取消监听时，可以在生命周期函数 destroyed 或 deactivated 等进行如下操作，以防不必要的监听。

以下是取消组件B对 itemImageLoad 事件的监听。

 this.$bus.$off("itemImageLoad", this.itemImgListener);