在Vue2和Vue3中事件总线的使用与区别

前提：在Vue升级到3.0版本后，事件总线使用的方式有些许改变，Vue2可以直接使用new Vue()；在Vue3中，推荐使用mitt来帮助我们实现全局事件总线和局部事件总线。接下来让我们来对比2和3版本的使用和区别：

Mitt是一个微型的 EventEmitter 库，在Vue3中，官方推荐使用它替代已经移除的EventBus，所以在Vue3使用前我们需要先安装Mitt依赖

npm install mitt --save//Vue3才要，Vue2不用
1

三个主要方法（Vue2则需加上前缀$，即$emit、$on、$off，其他不变）

emit(name,data) 
//触发事件，两个参数：name：触发的方法名，data：需要传递的参数
on(name,callback) 
//绑定事件，两个参数：name：绑定的方法名，callback：触发后执行的回调函数
off(name) 
//解绑事件，一个参数：name：需要解绑的方法名
注：以上的name应该保持一致（同一个）
1
2
3
4
5
6
7

一、“全局”使用事件总线
1 、Vue2
① 引入：在全局main.js文件

import Vue from 'vue'
import App from './App'

//全局变量,在任意组件使用this.eventBus
Vue.prototype.$eventBus = new Vue();

new Vue({
  el: '#app',
  render: h => h(App)
})

1
2
3
4
5
6
7
8
9
10
11

② 使用：
场景：A组件传给B组件
A组件：

<template>
    <h3> A组件 </h3>
    <button @click="sendData"> 传值 </button>
</template>
​
<script>
  export default{
    methods:{
      sendData(){
      	//传递
        this.eventBus.$emit('changeEvent',{a:1, b:1})
      },
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

B组件：

<template>
    <h3> B组件 </h3>
</template>
​
<script>
  export default{
    mounted:{
      //接收参数
      this.eventBus.$on('changeEvent',(res)=>{
      	console.log("打印",res);//打印 {a:1, b:1}
      })
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

2、Vue3
① 引入：在全局main.js文件

import {createApp} from 'vue'
import mitt from 'mitt'
import {App} from './App'
​
const app = createApp(App)
const eventBus= mitt()
app.config.globalProperties.$eventBus= eventBus//相当于Vue2中的:Vue.prototype.$eventBus= new Vue();Vue3移除了prototype
1
2
3
4
5
6
7

② 使用：
场景：A组件传给B组件
A组件：

<template>
    <h1> A组件 </h1>
    <button @click="sendData"> 传值 </button>
</template>
​
<script lang='ts' setup>
    import { getCurrentInstance } from 'vue'
    const cxt  = getCurrentInstance() //相当于Vue2中的this
    const eventBus = cxt.appContext.config.globalProperties.$eventBus
    const sendData= function(){
    	//发起传值
        eventBus.emit('changeEvent',{a:1, b:1})
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

B组件：

<template>
    <h3>B组件</h3>
</template>
​
<script lang='ts' setup>
    import { getCurrentInstance,onMounted,onBeforeUnmount } from 'vue'
    const cxt  = getCurrentInstance()
    const eventBus = cxt.appContext.config.globalProperties.$bus
    onMounted(()=>{
    	//接收传值
        eventBus.on('changeEvent',(res)=>{
            console.log("打印",res);//打印 {a:1, b:1}
        })
    })
    onBeforeUnmount(()=>{
    	//可以解绑
        eventBus.off('changeEvent')
    })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

二、“局部”使用事件总线
1、Vue2、Vue3
① 引入：新建一个bus.js文件（位置任意）

//vue2部分!
import Vue from 'vue'
const eventBus = new Vue();
export default eventBus;


//vue3部分!
import mitt from 'mitt'
const eventBus = mitt();

export default eventBus;
1
2
3
4
5
6
7
8
9
10
11

②、使用：只要在想使用的组件页面引入，其他的操作emit、on、off跟全局引入后操作一样，这里就不一一展开，可以参考上面。

import eventBus from './js/bus.js'
1