VUE 事件总线EventBus，不同页面间的传值

在实际开发过程中有时候会遇到需要在不用页面之间的实时传值，如果感觉vuex进行传值比较麻烦，可以考虑Vue的事件总线 EventBus来进行通信。

EventBus的简介

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

创建一个event-bus.js

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

在main.js 中初始化

// main.js
Vue.prototype.$EventBus = new Vue()

在A页面发起通信

<template>
    <button @click="sendMessage()">-</button>
</template>

<script> 
import { EventBus } from "@/event-bus.js";
export default {
  methods: {
    sendMessage() {
      EventBus.$emit("fromMsg", '我是发送的消息');
    }
  }
}; 
</script>

B页面接受通信

<template>
  <p>{{msg}}</p>
</template>

<script> 
import { EventBus } from "@/event-bus.js";
export default {
  data(){
    return {
      msg: ''
    }
  },
  mounted() {
    EventBus.$on("fromMsg", (val) => {
      // A页面发送来的消息
      this.msg = val;
    });
  }
};
</script>

最好是在离开总页面时候注销这个EventBus事件

EventBus.$off('fromMsg')

EventBus.$off() // 关闭所有的总线事件