Vue3使用通信组件库mitt作为事件总线实现跨组件通信

news2024/11/15 23:44:53

mitt 介绍:

Mitt 是一个在 Vue.js 应用程序中使用的小型事件总线库。该库允许组件进行通信，而不必过度依赖父级或子级组件之间的 props。

先看项目用例：

【以下转载自：https://blog.csdn.net/yuanlong12178/article/details/139579299 】

在复杂的前端开发中，组件之间的通信是必不可少的环节。而在Vue3中，事件总线（Event Bus）是一种方便且高效的实现跨组件通信的方法。本文将详细介绍如何在Vue3项目中使用事件总线来实现跨组件通信，并提供实际示例代码，帮助你更好地掌握这一技能。

什么是事件总线？

事件总线（Event Bus）可以理解为一个全局的发布/订阅模式，可以通过它来实现不同组件之间的消息传递。在Vue实例或Vue组件中充当一个中央枢纽，通过它可以让一个组件发出事件，而其他组件监听并响应这些事件。

创建事件总线

在Vue3版本中，我们不再使用new Vue()来创建事件总线，而是通过mitt库，该库轻量且专注于事件总线功能。

首先，安装mitt库：

npm install mitt

然后，在项目的某个文件中创建事件总线。例如，我们可以在项目的src目录下创建一个名为EventBus.js的文件：

// src/EventBus.js

import mitt from 'mitt';

const emitter = mitt();

export default emitter;

发送事件

假设我们有一个名为ComponentA的组件，它需要向其他组件发送事件。我们可以在需要的地方使用事件总线来触发事件。

// src/components/ComponentA.vue
<template>
<button @click="sendMessage">Send Message</button>
</template>

<script>
import EventBus from '@/EventBus';

export default {
name: 'ComponentA',
methods: {
sendMessage() {
EventBus.emit('custom-event', { message: 'Hello from ComponentA!' });
}
}
}
</script>

在上面的代码中，我们通过EventBus.emit方法发送了一个名为custom-event的事件，并携带了消息数据。

监听事件

假设我们有另一个名为ComponentB的组件，它需要监听并响应来自ComponentA发送的事件。我们可以在组件的生命周期钩子中使用事件总线来监听事件。

// src/components/ComponentB.vue
<template>
<div>{{ receivedMessage }}</div>
</template>

<script>
import EventBus from '@/EventBus';

export default {
name: 'ComponentB',
data() {
return {
receivedMessage: ''
};
},
created() {
EventBus.on('custom-event', this.handleCustomEvent);
},
beforeUnmount() {
EventBus.off('custom-event', this.handleCustomEvent);
},
methods: {
handleCustomEvent(payload) {
this.receivedMessage = payload.message;
}
}
}
</script>

在上面的代码中，当组件创建时，我们使用EventBus.on方法监听了名为custom-event的事件，并指定了处理函数handleCustomEvent。当事件发生时，处理函数将更新组件的数据。在组件卸载之前，我们使用EventBus.off方法取消事件监听，以防止内存泄漏。

完整示例

为了更完整地展示如何使用事件总线实现跨组件通信，我们将整个项目的相关代码整合在一起。

创建事件总线

// src/EventBus.js
import mitt from 'mitt';
const emitter = mitt();
export default emitter;

发送事件的组件（ComponentA）

// src/components/ComponentA.vue
<template>
<button @click="sendMessage">Send Message</button>
</template>

<script>
import EventBus from '@/EventBus';

export default {
name: 'ComponentA',
methods: {
sendMessage() {
EventBus.emit('custom-event', { message: 'Hello from ComponentA!' });
}
}
}
</script>

监听事件的组件（ComponentB）

// src/components/ComponentB.vue
<template>
<div>{{ receivedMessage }}</div>
</template>

<script>
import EventBus from '@/EventBus';

export default {
name: 'ComponentB',
data() {
return {
receivedMessage: ''
};
},
created() {
EventBus.on('custom-event', this.handleCustomEvent);
},
beforeUnmount() {
EventBus.off('custom-event', this.handleCustomEvent);
},
methods: {
handleCustomEvent(payload) {
this.receivedMessage = payload.message;
}
}
}
</script>