Detailed explanation of eventBus implementation of sibling component communication in vue2.0s

This article mainly introduces the example code of eventBus in vue2.0s to implement sibling component communication. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

In vue1.0, communication between components is mainly achieved through vm.$dispatch propagating upward 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 find out that vue2.0 cannot use $.broadcast and $dispatch 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>

We want to implement the show component in the doClick() method For communication, 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();

so that we create a new vue Example. 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 we click Every time you click in the 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 the 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); 
    }); 
   }

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.

Related recommendations:

Vue brother component communication method

Vue.js component communication example sharing

Detailed explanation of event bus non-parent-child component communication in vue

Detailed analysis of several postures in Vue.js component communication

Deep dive into Vue.js components and component communication

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