vue3 使用$bus事件总线

1.安装mitt

npm i mitt

2.在main.js注册

// ...

import mitt from 'mitt'

const $bus = {}

const emitter = mitt()

$bus.on = emitter.on

$bus.emit = emitter.emit

$bus.off = emitter.off

app.config.globalProperties.$bus = $bus

app.mount('#app')

3.使用

3.1 在接收的页面

import {getCurrentInstance, onUnmounted} from 'vue'

setup() {

        const $bus = getCurrentInstance().appContext.config.globalProperties.$bus

        $bus.on('eventName', options => {

                // 自定义业务

        })

        // 清除监听

        onUnmounted(() => {

                $bus.off('eventName')

        })

}

3.2 在发布的页面

import {getCurrentInstance} from 'vue

setup() {

        const $bus = getCurrentInstance().appContext.config.globalProperties.$bus

        let params = {a: 123} // 自定义数据

        $bus.emit('eventName', params)

}