vue3如何使用 事件总线（mitt版）

因为vue3 取消了prototype属性，Vue2中的Vue.prototype.$bus=new Vue()方法的事件总线无法使用，在Vue3中，更推荐使用mitt，第三方库来帮助我们实现全局事件总线。

mitt两种引用方式 ：全局引入、部分引入（我使用的是部分引入）

一、安装

cnpm install mitt --save
或
npm install mitt --save

二、引入 

1、全局引入

在main.js里进行全局配置

import {createApp} from 'vue'
import {App} from './App'
import mitt from 'mitt'
​
const app = createApp(App)
const bus = mitt()
app.config.globalProperties.$bus = bus //等同Vue2=>（Vue.prototype.$bus = bus效果
...

2、局部引入

在常使用的js文件夹新增一个js文件，例如在util文件新增eventBus.js,并写入以下代码。

import mitt from 'mitt'
export default mitt()

三、使用 

使用方式：在需要发送和接收数据 的文件中，引入对应的js文件

import eventBus from '@/util/eventBus.js'

总线使用可以分为：数据发送方、数据接收方 。

也就是一个文件将想要传递的数据发到总线上，在任意一个文件引入js文件后，就可以接收到传递的数据。

1、数据发送方：

仅需要在需要传递数据的地方，写下面一行代码即可。

testData(){
    const curData="testData"
    //调用总线方法
    eventBus.emit('testData', curData);
}

2、数据接收方：

    beforeUnmount () {
        //卸载总线方法
        eventBus.off('getTestData')
    },
    mounted () {
        // 获取测试的数据方法
        eventBus.on('getTestData', data => {
           console.log('curData: ', data);
           ...
        })
    },

一定要注意踩坑！！！！

一定要注意踩坑！！！！

一定要注意踩坑！！！！

// 卸载总线方法
eventBus.off('getTestData')

由于总线不会自己销毁，所以在接收数据的地方，一定要在组件注销前的生命周期，加上销毁总线的代码，如上所示，否则你的总线不会被销毁，你会在该组件重复调用总线方法。