JAVASCRIPT
Implement a Global Event Bus for Cross-Component Communication
Facilitate communication between unrelated Vue 3 components using a lightweight global event bus with `mitt`, avoiding complex prop drilling or tight coupling between distant components.
// 1. Create and export the event bus (e.g., in `src/eventBus.js`)
import mitt from 'mitt';
const emitter = mitt();
export default emitter;
// 2. Component A (e.g., `SenderComponent.vue`) - Emitting an event
<template>
<button @click="sendMessage">Send Message</button>
</template>
<script setup>
import emitter from '../eventBus'; // Adjust path as needed
const sendMessage = () => {
emitter.emit('user-message', { text: 'Hello from Sender!', timestamp: Date.now() });
console.log('Event emitted: user-message');
};
</script>
// 3. Component B (e.g., `ReceiverComponent.vue`) - Listening for an event
<template>
<div>
<h3>Received Messages:</h3>
<div v-for="(msg, index) in messages" :key="index">
[{{ new Date(msg.timestamp).toLocaleTimeString() }}] {{ msg.text }}
</div>
</div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import emitter from '../eventBus'; // Adjust path as needed
const messages = ref([]);
onMounted(() => {
emitter.on('user-message', handleMessage);
console.log('Listening for user-message events');
});
onBeforeUnmount(() => {
emitter.off('user-message', handleMessage); // Clean up event listener
console.log('Stopped listening for user-message events');
});
const handleMessage = (payload) => {
messages.value.push(payload);
console.log('Message received:', payload);
};
</script>
How it works: This snippet illustrates how to create and use a global event bus in Vue 3 using the `mitt` library. An event bus allows components that don't have a direct parent-child relationship to communicate by emitting and listening to custom events. First, a `mitt` instance is created and exported. Then, one component can `emit` an event with a specific name and payload, while another component can `on` that same event name to receive the data. It's crucial to use `onBeforeUnmount` to call `emitter.off()` to remove event listeners and prevent memory leaks when a component is destroyed.