vue3-eventbus怎么用
时间: 2024-12-02 15:18:42 浏览: 21
Vue3 的 EventBus(事件总线)是一个独立于组件的中心化通信机制,它允许你在应用的各个部分之间传递自定义事件。以下是如何使用 Vue3 自带的 `@vue3/core` 中的 EventBus:
1. 首先,在项目中安装 `vue3-event-bus` 或者直接使用内置的 `eventBus`:
```bash
npm install vue3-event-bus
```
2. 创建一个全局的 EventBus 实例:
```javascript
import { createEventBus } from 'vue3-event-bus';
const eventBus = createEventBus();
```
3. 在需要发布事件的地方:
```javascript
// 发布事件
eventBus.$emit('myEvent', payload);
```
4. 在订阅事件的地方:
```javascript
// 订阅事件
eventBus.$on('myEvent', (payload) => {
console.log('Received event:', payload);
});
```
5. 如果你想在销毁应用时自动移除所有监听器,可以在主 Vue 应用实例创建时绑定到 `beforeDestroy` 生命周期钩子:
```javascript
new Vue({
setup() {},
beforeDestroy() {
eventBus.$off(); // 移除所有监听器
},
});
```
阅读全文