EventBus in vue2.0 implements sibling component communication

We know that the communication between parent and child components in vue is done through props and custom events. The simple non-parent and child component communication uses bus (an empty Vue instance), and vuex is selected for medium and large projects, but for small projects , a convenient solution is eventBus.

The main implementation method is to introduce a new Vue instance among sibling components that communicate with each other, and then invoke the event triggering and monitoring of this instance to implement communication and parameter transfer.

Simple example:

Reference: https://blog.csdn.net/u013034014/article/details/54574989?locationNum=2&fps=1
I will say a simpler one here:

Here, A.vue is the parent component, and B.vue and C.vue are sibling components. After a click in B, C prints the clicked DOM.
Add an event to click:

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

Inside the public method common/js/bus.js:

import View from 'view' ;
export default new Vue();

A new instance of Vue is created here, and then Bus is introduced into components B and C;
then events are triggered in B:

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

Call Bus in the created() hook in the C component to listen for this event and accept parameters:

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

 

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325557835&siteId=291194637