Vue3 全局 Event Bus 之 Mitt

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

Vue3从实例中移除了 $on、$off 和 $once 方法，所以我们如果希望继续使用全局事件总线，要通过第三方库，如 mitt

安装mitt库

npm install mitt -S

一、封装到单独的 js 文件中使用

封装 eventBus.js，文件代码如下：

import mitt from 'mitt';
const $Bus = mitt();
export default emitter;

组件内引入并使用
通过emit派发， on 方法添加事件，off 方法移除，clear 清空所有事件

# 导入 emitter 
import $Bus from './utils/eventbus';

# 触发事件
$Bus.emit("event", {name: "MagnumHou", age: 18});

# 监听事件
// 监听一个事件
$Bus.on("event", (info) => {
    console.log("event:", info);
});
// 通过 * 监听所有事件
$Bus.on('*',(type,info)=>{ // type:事件  info:接收的数据 
    console.log(type,info)
})

# 移除事件
# 移除指定事件监听
function onEvent(){}
$Bus.off("event", onEvent);
# 移除所有事件监听
$Bus.all.clear()

二、在 main.js 中全局引入

通过 app.config.globalProperties 将 Event Bus 挂载到全局

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

const app = createApp(App)
 
// Vue3 挂载全局 API
app.config.globalProperties.$Bus = mitt()
 
app.mount('#app')

然后直接在组件中通过emit派发， on 方法添加事件，off 方法移除，clear 清空所有事件。用法同 12.4.3.1 。

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

标签: vue