2021.08.11 eventBus事件总线【问题】

基础概念

它用于兄弟组件通信

如果咱们的应用程序不需要类似Vuex这样的库来处理组件之间的数据通信，就可以考虑Vue中的 事件总线 ，即 EventBus来通信。

EventBus 又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件，但也就是太方便所以若使用不慎，就会造成难以维护的“灾难”，因此才需要更完善的Vuex作为状态管理中心，将通知的概念上升到共享状态层次。

EventBus灾难： vue是单页应用，如果你在某一个页面刷新了之后，与之相关的EventBus会被移除，这样就导致业务走不下去。还要就是如果业务有反复操作的页面，EventBus在监听的时候就会触发很多次，也是一个非常大的隐患。这时候我们就需要好好处理EventBus在项目中的关系。通常会用到，在vue页面销毁时，同时移除EventBus事件监听。

初始化

方法一： 新创建一个 .js 文件

// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()

方法二： 直接在项目中的 main.js 初始化 EventBus

// main.js
Vue.prototype.$bus = new Vue()
// 全局的事件总线，它的工作原理是发布/订阅方法，通常称为 Pub/Sub

使用

发送事件：

import { EventBus } from "../event-bus.js";
EventBus.$emit("aMsg", '来自A页面的消息')

或  this.$bus.$emit('nameOfEvent', { ... pass some event data ...});

接收事件：

import { EventBus } from "../event-bus.js";
EventBus.$on("aMsg", (msg) => {
  this.msg = msg;  // A发送来的消息
});

或  this.$bus.$on('nameOfEvent',($event) => {
  // ...
})

移除事件监听者：

import { EventBus } from "../event-bus.js";
EventBus.$off('aMsg', {})
或者直接调用 EventBus.$off() 来移除所有事件频道，不需要添加任何参数 。

或  this.$bus.$off('sendMsg')

bus在两个组件之间通信，第一次不触发问题

参考 Vue事件总线（EventBus）使用详细介绍
参考 bus在两个组件之间通信，第一次不触发要如何解决