Vue中EventBus(事件总线)的基本用法

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')

完整代码

utils/EventBus.js

import Vue from 'vue'

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

A 组件代码

<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>

B 组件代码

<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>