前提:在Vue升级到3.0版本后,事件总线使用的方式有些许改变,Vue2可以直接使用new Vue();在Vue3中,推荐使用mitt来帮助我们实现全局事件总线和局部事件总线。接下来让我们来对比2和3版本的使用和区别:
Mitt是一个微型的 EventEmitter 库,在Vue3中,官方推荐使用它替代已经移除的EventBus,所以在Vue3使用前我们需要先安装Mitt依赖
npm install mitt --save//Vue3才要,Vue2不用
三个主要方法(Vue2则需加上前缀 ,即 ,即 ,即emit、 o n 、 on、 on、off,其他不变)
emit(name,data)
//触发事件,两个参数:name:触发的方法名,data:需要传递的参数
on(name,callback)
//绑定事件,两个参数:name:绑定的方法名,callback:触发后执行的回调函数
off(name)
//解绑事件,一个参数:name:需要解绑的方法名
注:以上的name应该保持一致(同一个)
一、“全局”使用事件总线
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)
})
② 使用:
场景: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>
B组件:
<template>
<h3> B组件 </h3>
</template>
<script>
export default{
mounted:{
//接收参数
this.eventBus.$on('changeEvent',(res)=>{
console.log("打印",res);//打印 {a:1, b:1}
})
}
}
</script>
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
② 使用:
场景: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>
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、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;
②、使用:只要在想使用的组件页面引入,其他的操作emit、on、off跟全局引入后操作一样,这里就不一一展开,可以参考上面。
import eventBus from './js/bus.js'