Vue之mitt事务总线使用方法

npm install -S mitt

1.组件总线

①vue入口文件main.js中挂载全局属性

//导入vue创建命令
import { createApp } from 'vue';
//导入vue入口组件
import App from './App.vue';
//导入插件mitt
import mitt from "mitt"
...
//创建Vue应用实例
const app = createApp(App)
//挂载事务总线为全局属性
app.config.globalProperties.$mybus = new mitt()
...
 
app 是自定义Vue实例名
mybus 是自定义总线属性名

②组件中发送事件/发布
this.$mybus.emit('自定义事件名称','数据');

③组件中接收事件/订阅

this.$mybus.on('自定义事件名称',data=>{
    console.log(data); //控制台输出接收到的数据
})

④移除总线事件监听
this.$mybus.off('自定义事件名称')

2. 组件总线
①封装自定义事务总线文件mybus.js
创建新的js文件，自定义命名

/src/myplugins/mybus.js

import mitt from 'mitt'
export default mitt()

 ②在发送和接收组件中分别导入mybus.js

<template>
...
</template>
<script>
import mybus from "../myplugins/mybus";
...
export default {
...
}
</script>
<style>
...
</style>
注意：
组件中导入文件mybus.js使用相对路径

③发送事件/发布
mybus.emit('自定义事件名称','数据');

④接收事件/订阅
mybus.on('自定义事件名称',data=>{
    console.log(data);//接收到的数据
})

⑤移除总线事件监听
mybus.off('自定义事件名称');