【vue2】全局事件总线$bus

一、main.js 文件中注册全局事件总线

new Vue({
  router,
  store,
  render: h => h(App),
  // 注册全局事件总线（$bus 可以任意命名，一般约定用 $bus））
  beforeCreate() {
    Vue.prototype.$bus = this;
  }
}).$mount('#app');

二、组件A在 mounted 钩子函数中注册自定义事件，beforeDestroy 钩子函数中销毁自定义事件

mounted() {
  // 注册自定义事件
  this.$bus.$on('refreshSystemName', sName => {
    this.systemName = sName;
  });
},
beforeDestroy() {
  // 销毁自定义事件
  this.$bus.$off(['refreshSystemName']);
}

三、组件B调用全局事件总线

// 按钮点击
btnClick() {
  // 调用全局事件总线
  this.$bus.$emit('refreshSystemName', localStorage.getItem('systemName'));
}