VUE3 basic tutorial: using Vue.js event bus

Vue.js is a popular front-end JavaScript framework, and its event bus exists as one of its core functions. In Vue.js, the event bus acts as a medium for communication between components. This article will introduce you to how to use the event bus of Vue.js.

What is the event bus?

The event bus is an implementation of the central event bus pattern. Simply put, the event bus is a global Vue instance that we can use anywhere in our application. It acts as a medium for communication between components.

Vue.js mounts the event bus on Vue.prototype, which means it is part of the Vue instance, so you can use it anywhere in your application.

How to set up the event bus?

Setting up the event bus is very simple, just declare it in a new Vue instance. In your main.js file, you can add the following code:

Vue.prototype.$bus = new Vue();

This line of code instantiates a Vue instance and mounts it on Vue.prototype, making it a Vue instance. part. Now, you can use $bus in any component.

How to send messages between components?

Sending messages between components using the event bus is very simple. You just need to send the message in one component and listen for the message in another component. Let's look at an example:

// 组件 A
this.$bus.$emit('message', 'hello from A');

// 组件 B
this.$bus.$on('message', message => {
  console.log(message); // hello from A
});

In component A, we use the $emit method to send a 'message' message with the data 'hello from A'. In component B, we use the $on method to listen for the 'message' message and process the message in the callback function.

It should be noted that when the component is destroyed, the event listener needs to be removed using the $off method to avoid memory leaks.

How to use event bus in application?

Now that you know how to set up an event bus and send messages between components, how do you use it in your application? Here is a simple example:

// App.vue
<template>
  <div>
    <router-view />
    <button @click="sendMessage">Send message</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$bus.$emit('message', 'hello from App');
    }
  }
};
</script>

// Home.vue
<template>
  <div>
    <h1>Welcome Home</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  created() {
    this.$bus.$on('message', message => {
      this.message = message;
    });
  }
};
</script>

In this example, we define a button in App.vue that can send a 'message' message. In Home.vue, we use the $on method to listen to the 'message' message and display the message on the page.

Summary

The event bus is a very important Vue.js feature that can help you achieve communication between components. By using the $emit and $on methods, you can easily pass messages between components. Remember to use the $off method to remove event listeners when the component is destroyed to avoid memory leak issues. I hope this article is helpful to you, thank you for reading!

The above is the detailed content of VUE3 basic tutorial: using Vue.js event bus. For more information, please follow other related articles on the PHP Chinese website!