vue里面使用EventBus（事件总线）

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

这里我们分别介绍Vue2里面和Vue3里面分别使用事件总线的用法

Vue2里面的使用

EventBus的简介
EventBus又称事件总线，相当于一个全局的仓库，任何组件都可以去这个仓库里获取事件
初始化

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

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

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

在 main.js 中初始化 EventBus

// src/main.js
 
Vue.prototype.$EventBus = new Vue()
 
1
2
3
4

传递数据
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

注意点:
总而言之，A组件只向EventBus发送了一次事件，但B组件却进行了多次监听，EventBus容器中有很多个一模一样的事件监听器这时就会出现，事件只触发一次，但监听事件中的回调函数执行了很多次
1.解决办法：在组件离开，也就是被销毁前，将该监听事件给移除，以免下次再重复创建监听
2.语法：EventBus.$off(要移除监听的事件名)

Vue3里面的使用

vue3里面不能使用我们刚才说的EventBus来创建总线了，我们这里使用第三方插件Mitt
Mitt是一个在Vue.js应用程序中使用的小型事件总线库。该库允许组件进行通信，而不必过度依赖父级或子级组件之间的props。

Mitt的特性和功能介绍
轻量级: Mitt只有200字节大小，不会增加你的应用程序的负担
方便易用：只需要引入mitt并配置即可使用
支持任何Javascript环境：Mitt支持在任何Javascript环境下使用，不仅限于Vue
应用场景：组件通信

引入Mitt

安装依赖

执行安装命令

npm install --save mitt
1

在src目录下面，新建/utils/bus.js，内容如下：

// 事件总线第三方库：
import mitt from 'mitt'

const bus = mitt()
export default bus
1
2
3
4
5

使用：

import bus from '@/utils/bus.js'

//in component A 触发
bus.emit('event-name', eventData)

//in component B 监听
bus.on('event-name', eventData => { /* do something with eventData */ })

// 页面卸载的时候取消本次监听
bus.off('event-name'， eventData => { /* do something with eventData */ })
1
2
3
4
5
6
7
8
9
10

如果我们使用TS语法时候，这里的mitt使用如下
在src目录下面，新建/utils/bus.ts，内容如下：

// https://www.npmjs.com/package/mitt
import mitt, { Emitter } from 'mitt';

// 类型
const emitter: Emitter<MittType> = mitt<MittType>();

// 导出
export default emitter;
1
2
3
4
5
6
7
8

使用如下：

<script setup lang="ts" name="layoutBreadcrumbUser">
import mittBus from '/@/utils/mitt';

//in component A 触发
mittBus.emit('closeAllTagsView')

//in component B 监听
mittBus.on('closeAllTagsView', eventData => { /* do something with eventData */ })

页面卸载的时候取消本次监听
mittBus.off('closeAllTagsView', eventData => { /* do something with eventData */ })
</script >
1
2
3
4
5
6
7
8
9
10
11
12