Detailed explanation of the steps to use event bus in Vue3

1. Create an event bus

In Vue 3, the way the event bus is created is different from that in Vue 2. Vue 3 no longer uses Vue instances directly as event bus, but uses an empty object ormittLibrary. Here's how to create a simple event bus:

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

2. Use event bus in components

Once the event bus is created, it can be introduced and used in the component to trigger and listen for events. Here is an example of how to communicate using event buses in two components:

1. In the component that sends the event

// 
 
<template>
 
  <button @click="sendMessage">Send Message</button>
 
</template>
 
 
<script>
 
import emitter from './bus';
 
export default {
 
  methods: {
 
    sendMessage() {
 
      ('message', 'Hello from SenderComponent');
 
    }
 
  }
 
}
 
</script>
 

3. Detailed explanation

1. Why use event bus

Event bus is a lightweight solution for communicating between Vue components, especially between components without a direct parent-child relationship. Its main advantages include:

• concise: Just a simple object or library is needed to implement it.
• flexible: Events can be triggered and listened to anywhere.
• Low coupling: Components do not need to know each other's existence.

2. Advantages of using mitt library

In Vue 3, it is recommended to use the mitt library to create event buses because it is lighter, better performance, and compatible with Vue 3's Composition API. The main advantages of the mitt library include:

• Lightweight: Only a few hundred bytes in size.
• Simple and easy to use: The API is very concise, onlyemitandonWait for a few methods.
• Superior performance: Due to its simple implementation, the performance overhead is extremely low.

3. Alternative solution to event bus in Vue 3

• Vuex: Suitable for complex applications that require global state management.
• Provide/Inject: Suitable for communication between ancestors and descendants components.
• Composition API: Sharing logic through combining functions.

IV. Example description

Here is a complete example showing how to use the event bus to communicate between two components that have no direct relationship.

1. Create a new Vue project

First, create a new Vue 3 project:

npm init vue@latest

After following the prompts to create the project, install itmittLibrary:

npm install mitt

2. Create an event bus

Create a project root directoryFile, and add the following code:

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

3. Components that send events

existsrc/componentsCreate a directory  File and add the following code:

<template>
 
  <button @click="sendMessage">Send Message</button>
 
</template>
 
 
<script>
 
import emitter from '../bus';
 
export default {
 
  methods: {
 
    sendMessage() {
 
      ('message', 'Hello from SenderComponent');
 
    }
 
  }
 
}
 
</script>

4. Components that receive events

existsrc/componentsCreate a directory File and add the following code:

<template>
  <div>
    <p>Received Message: {{ message }}</p>
  </div>
</template>
 
<script>
import emitter from '../bus';
export default {
  data() {
    return {
      message: ''
    }
  },
 
  mounted() {
    ('message', (msg) => {
       = msg;
    });
  },
 
  beforeUnmount() {
    ('message');
  }
}
 
</script>
 

5. Use components in the main application

exist src/ In the file, add the following code:

<template>
  <div >
    <SenderComponent />
    <ReceiverComponent />
  </div>
</template>
 
<script>
 
import SenderComponent from './components/';
import ReceiverComponent from './components/';
export default {
  components: {
    SenderComponent,
    ReceiverComponent
  }
}
 
</script>
 

This is the introduction to this article about the detailed explanation of the steps of using event bus in Vue3. For more related content on Vue3 using event bus, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!