How to use event bus functions in Vue documentation

How to use the event bus function in the Vue documentation

In Vue development, we often need to transfer data or call methods between different components. The event bus provides a simple and flexible way to implement communication between components.

The event bus is part of the Vue instance that allows components to communicate with each other. Simply put, the event bus is a Vue instance that can be used for communication between components. In other words, we can use the event bus to realize information transfer and method calling between components.

Usage:

The first step in using the event bus is to instantiate it in a Vue instance. We can instantiate an event bus in the main.js file and mount it on the Vue prototype.

import Vue from 'vue'
Vue.prototype.$bus = new Vue()

In the above code, we added a $bus object to the Vue instance through Vue.prototype. and assigned it to a new one Vue instance. In this way, we can communicate between components through the $bus object.

Use the event bus to publish and subscribe to events

Next we can use the $bus object to publish and subscribe to events. We can use the $bus.$on() method in the component that needs to subscribe to the event to subscribe to the event. When the event is triggered, the callback function will be executed.

For example, an event named foo is subscribed to in component A:

this.$bus.$on('foo', (msg) => {
  console.log(msg)
})

The foo event with the same name is triggered in component B :

this.$bus.$emit('foo', 'this is message from component B')

This will output this is message from component B in the console of component A.

Use the event bus to call methods

In addition to publishing and subscribing events, we can also use the $bus.$emit() method to perform methods call. This method calling method is also called function calling.

Define a handleClick() method in component A:

methods: {
  handleClick(msg) {
    console.log(msg)
  }
}

Use the $bus.$emit() method call in component B handleClick() method in component A:

this.$bus.$emit('handleClick', 'this is a test message')

This will output this is a test message in the console of component A.

Summary:

By using the event bus, we can easily publish and subscribe events, and call methods between Vue components. The event bus has a wide range of application scenarios in Vue development and can help us better organize and manage communication between components.

The above is the detailed content of How to use event bus functions in Vue documentation. For more information, please follow other related articles on the PHP Chinese website!