一、前言
在Vue升级到3.0版本后，prototype属性就被取消了，所以我们不能再使用Vue2中的Vue.prototype.$bus=new Vue()的方式来使用全局事件总线。在Vue3中，推荐使用mitt这一三方库来帮助我们实现全局事件总线。
二、安装
Mitt是一个微型的 EventEmitter 库，在Vue3中，官方推荐使用它替代已经移除的EventBus
npm install mitt --save三、主要的三个方法
主要命令有三个分别是emit、on、off
emit(name,data)
//触发事件，两个参数：name：触发的方法名，data：需要传递的参数
on(name,callback)
//绑定事件，两个参数：name：绑定的方法名，callback：触发后执行的回调函数
off(name)
//解绑事件，一个参数：name：需要解绑的方法名四、两种不同的注册使用方法
全局引入及其使用方法
1.引入
根目录下的main.js(项目的入口文件)中进行全局配置：
import mitt from 'mitt'
import {createApp} from 'vue'
import {App} from './App'
const app = createApp(App)
const bus = mitt()
app.config.globalProperties.$bus = bus //相当于Vue2中的:Vue.prototype.$bus = bus
...2.使用
假设我们在组件A中点击按钮，控制组件B输出一句话。
组件A：
<template>
<h1>
我是A组件
</h1>
<button @click="emitMitt">
点我控制B输出信息
</button>
</template>
<script lang='ts' setup>
import { getCurrentInstance } from 'vue'
const cxt = getCurrentInstance() //相当于Vue2中的this
const bus = cxt.appContext.config.globalProperties.$bus
const emitMitt = function(){
bus.emit('printMessage','我是B组件，我被A组件触发了')
}
</script>组件B：
<template>
<h1>
我是B组件
</h1>
</template>
<script lang='ts' setup>
import { getCurrentInstance,onMounted,onBeforeUnmount } from 'vue'
const cxt = getCurrentInstance()
const bus = cxt.appContext.config.globalProperties.$bus
onMounted(()=>{
bus.on('printMessage',(message)=>{
alert(message)
})
})
onBeforeUnmount(()=>{
bus.off('printMessage')
})
</script>局部引入及其使用方法
1.引入
在根目录下创建一个bus.js
import mitt from 'mitt'
export const events = mitt()2.使用
需求依旧是在组件A中点击按钮，控制组件B输出一句话。
组件A：
<template>
<h1>
我是A组件
</h1>
<button @click="emitMitt">
点我控制B输出信息
</button>
</template>
<script lang='ts' setup>
import { events } from '../bus.js' //引入事件总线，填写正确的bus.js路径
const emitMitt = function(){
events.emit('printMessage','我是B组件，我被A组件触发了')
}
</script>组件B：
<template>
<h1>
我是B组件
</h1>
</template>
<script lang='ts' setup>
import { onMounted,onBeforeUnmount } from 'vue'
import { events } from '../bus.js'
onMounted(()=>{
events.on('printMessage',(message)=>{
alert(message)
})
})
onBeforeUnmount(()=>{
events.off('printMessage')
})
</script>注意点
-
在事件的触发之前，要确定事件已经被绑定，否则是找不到触发事件的