全局事件总线

GlobalEventBus: 一种组件间通信的方式, 适用于任意组件间通信

安装全局事件总线

• 代码示例

// main.js
new Vue({
  ...
  beforeCreate() {
    Vue.prototype.$bus = this // 安装全局事件总线, $bus 就是当前应用的 vm
  }
  ...
})

使用事件总线

• 接收数据: A组件想接收数据, 则在A组件中给$bus绑定自定义事件, 事件的回调在A组件中

mounted() {
  this.$bus.$on('xxx', (data) => { ... })
}

• 提供数据

methods: {
  doSomething() {
    this.$bus.$emit('xxx', 数据)
  }
}

• 图示

全局事件总线注意项

• 在beforeDestroy钩子函数中用$off去解绑当前组件所用到的事件:

beforeDestroy() {
  this.$bus.$off('xxx')
}