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 theevent triggering and monitoring of this instance respectively.
Here is a simple example: For example, we have three components here, First, we add a click event to the click component<p class="click" @click.stop.prevent="doClick($event)"></p>
import Vue from 'vue'; export default new Vue();
import Bus from 'common/js/bus.js';
methods: { addCart(event) { Bus.$emit('getTarget', event.target); } }
created() { Bus.$on('getTarget', target => { console.log(target); }); }
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!