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); }) }