Vue中的事件总线

「这是我参与11月更文挑战的第19天，活动详情查看：2021最后一次更文挑战」。

今天的主角是EventBus，相信我们在做项目的时候，也会遇到兄弟组件需要通信的情景，这种情况该怎么做呢？这时候可以考虑使用今天的主角EventBus，来帮你完成这个操作。

什么是EventBus

EventBus:又称为事件总线。在Vue中可以使用EventBus来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件。

在做vue项目时，偶遇到需要兄弟组件通信，但是你又不想用Vuex做一个全局状态管理，觉得有点大材小用了。这时候，就可以使用EventBus，快捷方便的解决这个问题。

在Vue项目中如何使用EventBus来实现兄弟组件之间的通信呢？具体可分为以下几个步骤。

首先我们需要创建时间总线并将其导出，以便其他模块可以使用或者监听它。创建utils文件夹，在其内部创建一个event-bus.js文件，这种方式初始化的EventBus是一个全局的事件总线。

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

创建好EventBus后，我们就可以使用了。在使用之前要将EventBus引入到组件中。

import { EventBus } from "../utils/EventBus";

现在假若我们需要通信的组件分别是A、B，A要告诉B，“Hello，我是A”；让我们开始给B发送信息吧。

//component A
msg = "Hello，我是A"
//绑定了一个点击事件去发送信息
handleClick(): void {
  EventBus.$emit("msg", this.msg);
}

A已经给B发送信息了，那B该怎么接收呢？

第一步，引入：

import { EventBus } from "../utils/EventBus";

第二步，接收：

  msg = "";
  mounted() {
    EventBus.$on("msg", (msg: string) => {
      console.log(msg, "**");
      this.msg = msg;
    });
  }

Vue是单页应用，当你刷新一个页面的时候，用到的EventBus会被移除，这样也许导致功能不行。

还有如果页面中有反复操作的需求，EventBus 在监听的时候就会触发很多次，这也是一个很大的隐患。所以在项目中，我们要处理好与EventBus的关系。通常处理的方法是，在vue页面销毁时，同时移除EventBus 事件监听。

  beforeDestroy() {
    EventBus.$off('msg')
  }