Vue brothers components communicate

Vue brothers components of the communication means of the central event bus

 Download Link: https://www.yinxiangit.com

In fact, to achieve brothers components of communication, even by way of parent-child communication component is to be achieved, such as the child -> parent -> child;

Here then, is not to repeat them in this way, to tell you the following - With central event bus.

 

first step:

In the Components folder, create a js file, here named as "bus, js", write the following code in it:

    import Vue from 'vue';
    const Bus = new Vue();
    export default Bus;

Step two:

If the assembly and component b.vue a.vue brothers assembly, respectively, then two files .vue introduced bus.js, worded as follows:

    import Bus from './bus.js'

Specific path in accordance with the actual introduction of the project to write, here is bus.js and .vue file at the same level.

third step:

After if we are to achieve a.vue pass values ​​to b.vue, then a.vue in the right place, such an event is triggered, the life cycle or the like are mounted line, write:

Bus.$emit("事件名",要传的数据);

the fourth step:

Written b.vue's mounted in:

Bus.$on('事件名',res=>{
	console.log(res)//传过来的数据	
})

The data can be passed over a variable, it can be an object, data.