vue2.0中eventBus实现兄弟组件通讯

标签：ons   解决方案   推荐   details   情况   rom   参考   方案   dom   

我们知道，在vue中父子组件的通讯是通过props和自定义事件搞定的，简单那的非父子组件通讯用bus（一个空的Vue实例），针对中大型的项目会选择vuex，然而小项目的话，便捷的解决方案就是eventBus。

官网相关描述在：$dispatch和$broadcast替换  一节中。提到：

$dispatch 和 $broadcast 也没有解决兄弟组件间的通信问题。对于$dispatch 和 $broadcast最简单的升级方式就是：通过使用事件中心，允许组件自由交流，无论组件处于组件树的哪一层。由于 Vue 实例实现了一个事件分发接口，你可以通过实例化一个空的 Vue 实例来实现这个目的。组件中可以使用$emit,$on,$off分别来分发，监听，取消监听事件。但是对于复杂的情况，更推荐使用一个专门的状态管理层如：Vuex。

主要实现途径是在相互通讯的兄弟组件之中，都引入一个新的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);     
    })
}

vue2.0中eventBus实现兄弟组件通讯

标签：ons   解决方案   推荐   details   情况   rom   参考   方案   dom   

原文地址：https://www.cnblogs.com/tangjiao/p/9002264.html