一、前言

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

注意点

  • 在事件的触发之前,要确定事件已经被绑定,否则是找不到触发事件的

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐