我们知道,在vue中父子组件的通讯是通过props和自定义事件搞定的,简单那的非父子组件通讯用bus(一个空的Vue实例),针对中大型的项目会选择vuex,然而小项目的话,便捷的解决方案就是eventBus。
主要实现途径是在相互通讯的兄弟组件之中,都引入一个新的Vue实例,然后分别调用这个实例的事件触发和监听来实现通讯和参数传递。
简单的例子:
参考:https://blog.csdn.net/u013034014/article/details/54574989?locationNum=2&fps=1
我这里说个比较简单的:
这里,A.vue是父组件,B.vue,C.vue是兄弟组件。在B中click后,C将点击的DOM打印出来。
给click添加事件:
<div class="click" @click.stop.prevent="doClick($event)"></div>
在公共方法common/js/bus.js里面:
import Vue from 'vue'; export default new Vue();
这里创建了一个新的Vue的实例,接下来在B和C组件里面引入Bus;
然后在B里面进行触发事件:
methods:{ addCars(ev){ Bus.$emit('getTarget',event.target); } }
在C组件里面的created()钩子中调用Bus监听这个事件,并接受参数:
created(){ Bus.$on('getTarget',target=>{ console.log(target); }) }