Vue事件总线（EventBus）使用兄弟传递

vue组件非常常见的有父子组件通信，兄弟组件通信。而父子组件通信就很简单，父组件会通过 props 向下传数据给子组件，当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件。今天就来说说如果两个页面是兄弟关系，该如何通信了(这里只是介绍使用eventBus并不是推荐在兄弟关系中这样使用)？

EventBus的简介

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

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

import Vue from 'vue'
export const EventBus = new Vue()

实质上EventBus是一个不具备 DOM 的组件，它具有的仅仅只是它实例方法而已，因此它非常的轻便。

共同父组件中

    <templates-table
      :Event="Event"
    ></templates-table>
    <upload-state
      :Event="Event"
    ></upload-state>

const Event = new Vue();

发送消息

      uploadTemplate() {
        this.Event.$emit("type", "CREATE_APP");
        this.Event.$emit("appId", appId);
      },

接收消息

  created() {
    this.workspace = this.$route.params.workspace;
    // 创建接收数据
    this.Event.$on("type", (type) => {
      this.type = type;
    });
    this.Event.$on("appId", (appId) => {
      this.appId = appId;
    });
  },