Vue2 - 组件通信之 EventBus

Vue 其他 9 种通信方式，参考这篇文章。

1，介绍

EventBus 称为事件总线。在 Vue 中可以使用它来作为沟通桥梁，也就是所有组件共用的事件中心，来实现不受层级约束的组件通信。

• 可以监听 / 取消监听某个事件。
• 可以触发监听的事件，还可以传参，并且自动通知监听者。

2，实现

2.1，手动实现监听和触发

// eventBus.js
const listeners = {}

export default {
  // 监听
  $on(event, handler) {
    if (!listeners[event]) {
      listeners[event] = new Set()
    }
    // 同一个事件，可以绑定多个处理函数
    listeners[event].add(handler)
  },
  // 取消监听
  $off(event, handler) {
    if (listeners[event]) {
      listeners[event].delete(handler)
    }
  },
  // 触发监听，可传递参数
  $emit(event, ...args) {
    if (listeners[event]) {
      for (const handler of listeners[event]) {
        handler(...args)
      }
    }
  }
}

举例1

// test.js
import eventBus from './eventBus.js'
eventBus.$on('event1', function () {
  console.log('1')
})

eventBus.$on('event1', function () {
  console.log('2')
})

setTimeout(() => {
  eventBus.$emit('event1')
}, 1000)

2.2，使用 Vue 实例

因为 Vue 实例本身就实现了上面这3个方法，所以可直接这样实现

// eventBus.js
import Vue from 'vue'
export default new Vue({})

或是直接绑定到原型上来使用。

// main.js
import Vue from 'vue'
import App from './App.vue'

const vm = new Vue({
  render: (h) => h(App)
})

Vue.prototype.$bus = vm
vm.$mount('#app')

举例2：下面2个组件层级关系不做限制。

<!-- 组件 1 -->
<template>
  <button @click="handleClick">触发 event1 事件</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$bus.$emit('event1', 123)
    }
  }
}
</script>

<!-- 组件 2 -->
<script>
export default {
  methods: {
    methodC1(item) {
      console.log(item)
    },
    methodC2(item) {
      console.log(item)
    }
  },
  created() {
    this.$bus.$on('event1', this.methodC1)
    this.$bus.$on('event1', this.methodC2)
  }
}
</script>

注意，这个思路是将事件放到一个对象中管理（监听和触发）。如果直接在不同组件中使用 this.$on() 和 this.$emit() 是无效的，因为 this 指向不同的组件实例，而 $emit() 触发的是实例自己通过 $on() 监听的事件。

---

以上。