Detailed explanation of eventBus sibling component communication

This time I will bring you a detailed explanation of eventBus sibling component communication. What are the precautions for eventBus sibling component communication? The following is a practical case, let’s take a look.

In vue1.0, communication between components is mainly achieved through vm.$dispatch uploading along the parent chain and vm.$broadcast downward broadcasting. However, in vue2.0, this usage has been abolished.

After the addition of vuex, the communication between components will be clearer. For medium and large projects, it is a wise choice to plan the use of vuex from the beginning.

However, in some small projects, or for people like me who discovered that $.broadcast and $dispatch cannot be used in vue2.0 only halfway through writing, a more convenient solution is needed. Then, the role of eventBus is reflected.

The main practical approach is to introduce a new vue instance among the sibling components that want to communicate with each other, and then realize communication and parameter transfer by calling the

event triggering and monitoring of this instance respectively.

Here is a simple example:

For example, we have three components here,

main.vue, click.vue, and show.vue. click and show are sibling components under the parent component main, and click traverses multiple list items in the parent component through v-for. What needs to be implemented here is that after the click event is triggered in the click component, the show component will console which DOM element was clicked.

First, we add a click event to the click component

<p class="click" @click.stop.prevent="doClick($event)"></p>

To implement communication with the show component in the doClick() method, we need to create a new js file to create our eventBus. We name it bus.js

import Vue from 'vue'; 
export default new Vue();

In this way we create a new vue instance. Next we import it in the click component and show component.

import Bus from 'common/js/bus.js';

Next, we trigger an event in the doClick method:

methods: { 
  addCart(event) { 
  Bus.$emit('getTarget', event.target);  
  } 
}

Here, every time we click in the click component, the event named 'getTarget' will be triggered in the bus, and the event.target of the click event will be passed along the event.

Next, we need to call bus in the created() hook in the show component to listen for this event and receive the parameters:

created() { 
    Bus.$on('getTarget', target => { 
      console.log(target); 
    }); 
   }

In this way, in each click event of the click component, the event.target will be passed to the show and consoled.

So the use of eventBus is still very convenient, but if it is a medium to large project and the communication is more complicated, it is recommended that you use vuex directly.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Vue array and object assignment issues

Bootstrap and Vue operation user information addition and deletion

How does Yuansheng JS implement asynchronous file upload

The above is the detailed content of Detailed explanation of eventBus sibling component communication. For more information, please follow other related articles on the PHP Chinese website!