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


    我们知道,在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);     
        })
    }

     题外话:vuex是怎么实现的?

    参考:https://segmentfault.com/q/1010000007491994

  • 相关阅读:
    python实例
    date命令
    unbuntu禁用ipv6
    Oracle学习(一)
    深入浅出区块链笔记
    sqlserver索引
    Go学习(16):网络编程
    Go学习(15):并发与包
    Go学习(14):defer
    Go学习(13):异常
  • 原文地址:https://www.cnblogs.com/tangjiao/p/9002264.html
Copyright © 2020-2023  润新知