How to use event bus in Vue3

I. Introduction

After Vue was upgraded to version 3.0, the prototype attribute was canceled, so we can no longer use the Vue.prototype.$bus=new Vue()global event bus in the way of Vue2. In Vue3, it is recommended to use mitt, a three-party library, to help us realize the global event bus.

2. Installation

Mitt is a tiny EventEmitter library. In Vue3, it is officially recommended to use it instead of the removed EventBus

npm install mitt --save

Three main methods

There are three main commands are emit, on, off

emit(name,data) 
//触发事件，两个参数：name：触发的方法名，data：需要传递的参数
on(name,callback) 
//绑定事件，两个参数：name：绑定的方法名，callback：触发后执行的回调函数
off(name) 
//解绑事件，一个参数：name：需要解绑的方法名

4. Two different registration methods

Global imports and how to use them

1. Introduce

Global configuration in main.js (entry file of the project) in the root directory:

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. use

Suppose we click a button in component A to control component B to output a sentence.

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

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

Local imports and how to use them

1. Introduce

Create abus.js

import mitt from 'mitt'
export const events = mitt()

2. use

The requirement is still to click the button in component A to control component B to output a sentence.

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

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

important point

• Before the event is triggered, make sure the event has been bound, otherwise the event cannot be triggered