vue组件中最常见的数据传递就是父子组件之间的传递，父组件可以通过 props 向下传数据给子组件，子组件可以通过 $emit 事件携带数据给父组件。然而当两个页面没有任关系，该如何通信？这就引出了 EventBus ( 事件总线 ) 这个概念

初始化

方法一：新建文件

首先需要初始化一个 EventBus，并且向外共享一个 Vue 的实例对象
新建一个 js 文件，比如：EventBus.js

// src/utils/EventBus.js 文件 import Vue from 'vue'  // 向外共享 Vue 的实例对象 export default new Vue() 

方法二：挂载在 Vue 的原型上

在 main.js 中初始化 EventBus

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

传递数据

// a.vue  // 导入 EventBus import EventBus from '@/utils/EventBus'  // 通过调用 bus.$emit('自定义事件', 数据) 触发自定义事件发送数据 EventBus.$emit('share', this.a_data); 

接收数据

// b.vue  // 导入 EventBus import EventBus from '@/utils/EventBus'  // 通过调用 $on('自定义事件', 事件处理函数) 注册自定义事件接收数据 // 其中，value 即为接收的数据 EventBus.$on('share', value => {   this.b_data = value; }) 

移除事件

在组件离开，也就是被销毁前，需要将该监听事件给移除，以免下次再重复创建监听

// b.vue  // 移除监听事件 "share" EventBus.$off('share') 

完整代码

import Vue from 'vue'  // 向外共享 Vue 的实例对象 export default new Vue() 

<template>   <div>     <button @click="send">点我发送消息</button>   </div> </template>  <script> import EventBus from '@/utils/EventBus'  export default {   data:()=>({     a_data: 'message'   }),   methods: {     send () {       EventBus.$emit('share', this.a_data);     }   } } </script>  

<template>   <div>   <h1>{{ b_data }}</h1>   </div> </template>  <script> import EventBus from '@/utils/EventBus'  export default {   data: () => ({     b_data: null   }),   created () {     EventBus.$on('share', value => {       // 将 A 组件传递过来的数据保存到 B 组件       this.b_data = value;     })   },   beforeDestroy() {     // 移除监听事件 "share"     EventBus.$off('share')   } } </script>