[JavaScript知识库]Vue3事件总线mitt的使用

Vue2.0的事件总线在3就被弃用了，换成了mitt事件总线

先安装mitt依赖

npm install --save mitt 

mitt库的使用主要分为两种方式

第一种方式，在原型中声明

第一步：main.js里代码声明mitt

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import mitt from 'mitt'

const app = createApp(App)

app.use(store).use(router).mount('#app')
app.config.globalProperties.$bus=new mitt()

注意：这个地方容易出错导致mitt无法在原型里声明

错误代码如下，两个createApp(App)会导致错误

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import mitt from 'mitt'

createApp(App).use(store).use(router).mount('#app')
createApp(App).config.globalProperties.$bus=new mitt()

这种也会导致错误，错误原因和上面一样

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import mitt from 'mitt'

const app = createApp(App)

createApp(App).use(store).use(router).mount('#app')
app.config.globalProperties.$bus=new mitt()

第二步：在组件里使用mitt

this.$bus.on("参数名称",() =>{
    console.log('-------')
    //回调函数
})

this.$bus.emit("参数名称")

第二种方法，在组件中引用

创建bus.js文件在src下，其他文件夹也行，就是下面的路径需要注意

在bus.js里引用mitt，暴露mitt就行了

import mitt from "mitt";
const bus = {};
const emitter = mitt();
bus.on = emitter.on;
bus.off = emitter.off;
bus.emit = emitter.emit;

export default bus

然后在组件中引用就行了

import bus from '@/bus'

bus.on("参数名称",() =>{
    console.log('-------')
    //回调函数
})

bus.emit("参数名称")

其实这种方式也可以在全局里声明的就是感觉会多此一举

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import bus from './bus'

const app = createApp(App)

app.use(store).use(router).mount('#app')
app.config.globalProperties.$bus=bus

这种组件内使用方法和第一种方法一样。