### Vue 3 中事件总线（Bus）的实现与
使用方法
在 Vue 3 中，由于移除了对 `Vue.
prototype` 的支持，传统的事件总线实现方式已不再适用。以下是两种推荐的实现方法：
使用 `mitt` 库
和直接通过 Vue 实例创建事件总线。
---
#### 方法一：
使用 `mitt` 库实现事件总线
`mitt` 是一个轻量级的事件管理库，适用于 Vue 3 的事件总线实现[^2]。
1. **安装 mitt**
使用 npm 或 yarn 安装 `mitt`：
```bash
npm install mitt
```
2. **配置事件总线**
创建一个事件总线文件，例如 `
eventBus.js`：
```
javascript
//
eventBus.js
import mitt from 'mitt';
const bus = mitt(); // 创建事件总线实例
export default bus;
```
3. **发布事件**
在需要触发事件的地方，调用 `emit` 方法：
```
javascript
// 发布事件
import bus from './
eventBus';
bus.emit('custom-
event', { message: 'Hello, World!' });
```
4. **订阅事件**
在需要监听事件的地方，调用 `on` 方法：
```
javascript
// 订阅事件
import bus from './
eventBus';
bus.on('custom-
event', (data) => {
console.log(data.message); // 输出 "Hello, World!"
});
```
5. **取消订阅**
在组件销毁时，调用 `off` 方法以避免内存泄漏：
```
javascript
// 取消订阅
import bus from './
eventBus';
const handler = (data) => {
console.log(data.message);
};
bus.on('custom-
event', handler);
// 取消订阅
bus.off('custom-
event', handler);
```
---
#### 方法二：
使用 Vue 实例作为事件总线
尽管 Vue 3 移除了对 `
prototype` 的支持，但仍可以通过创建一个独立的 Vue 实例来实现事件总线[^3]。
1. **创建事件总线**
创建一个事件总线文件，例如 `
eventBus.js`：
```
javascript
//
eventBus.js
import { createApp } from 'vue';
const app = createApp({});
const bus = app.config.globalProperties.$bus = new Vue(); // 创建事件总线实例
export default bus;
```
2. **发布事件**
使用 `$emit` 方法发布事件：
```
javascript
// 发布事件
import bus from './
eventBus';
bus.$emit('custom-
event', { message: 'Hello, World!' });
```
3. **订阅事件**
使用 `$on` 方法订阅事件：
```
javascript
// 订阅事件
import bus from './
eventBus';
bus.$on('custom-
event', (data) => {
console.log(data.message); // 输出 "Hello, World!"
});
```
4. **取消订阅**
使用 `$off` 方法取消事件监听：
```
javascript
// 取消订阅
import bus from './
eventBus';
const handler = (data) => {
console.log(data.message);
};
bus.$on('custom-
event', handler);
// 取消订阅
bus.$off('custom-
event', handler);
```
---
#### 注意事项
- 在 Vue 3 中，推荐
使用 `mitt` 库替代原生 Vue 实例作为事件总线，因为其更轻量且更符合现代开发规范[^2]。
- 确保在组件销毁时清理事件监听器，以防止内存泄漏[^4]。
---
### 示例代码
以下是一个完整的示例，展示如何在 Vue 3 中
使用 `mitt` 实现事件总线：
```
javascript
//
eventBus.js
import mitt from 'mitt';
const bus = mitt();
export default bus;
// ComponentA.vue
<
template>
<button @click="send
Event">发送事件</button>
</
template>
<script>
import bus from './
eventBus';
export default {
methods: {
send
Event() {
bus.emit('custom-
event', { message: 'Hello from ComponentA' });
}
}
};
</script>
// ComponentB.vue
<
template>
<div>{{ message }}</div>
</
template>
<script>
import bus from './
eventBus';
export default {
data() {
return {
message: ''
};
},
created() {
bus.on('custom-
event', this.handle
Event);
},
beforeDestroy() {
bus.off('custom-
event', this.handle
Event);
},
methods: {
handle
Event(data) {
this.message = data.message;
}
}
};
</script>
```
---
###
本文提供了两个使用Prototype JavaScript框架的示例。第一个示例展示了如何利用Event.observe方法来监听按钮点击事件，并获取事件的相关信息；第二个示例介绍了如何使用Template创建模板，并通过evaluate方法将对象数组中的数据填充到模板中。
扫一扫
1193
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
