Table of Contents

前言

vue组件非常常见的有父子组件通信，兄弟组件通信。而父子组件通信就很简单，父组件会通过 props 向下传数据给子组件，当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件。今天就来说说如果两个页面没有任何引入和被引入关系，该如何通信了？

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

EventBus的简介

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

EventBus是 基于 订阅/发布 模式实现的 基于事件的异步分发处理系统。 好处就是能够解耦 订阅者 和 发布者，简化代码。

Vue事件总线(EventBus)使用指南：详细解析与实战应用_事件监听
发布者通过EventBus发布事件，订阅者通过EventBus订阅事件，当发布者发送事件时，订阅该事件的订阅者的事件处理方法将被调用。从图中看出，发布者发送一个事件时，则该事件将会同时传递给一个或多个该事件的订阅者。

订阅者(Subscriber)把自己想订阅的事件(Event)注册(register)到调度中心(EventBus)，当发布者(Publisher)发布该事件到调度中心时，也就是该事件触发时，由调度中心统一调度订阅者注册到调度中心的处理代码(onEvent())。

EventBus的优点
  • 简化了组件间间的通信；
  • 对事件通信双方进行解耦 ；
  • 避免了复杂且容易出错的依赖性和生命周期问题；
  • 速度快，性能好，代码简单优雅；
  • 分离了事件的发送者和接受者;

如何使用EventBus

一、初始化

首先需要创建事件总线并将其导出，以便其它模块可以使用或者监听它。我们可以通过两种方式来处理。先来看第一种，新创建一个 .js 文件，比如 event-bus.js