zoukankan      html  css  js  c++  java
  • 说说Vue中的事件总线

    在用Vue框架的时候,组件(component)是我们必不可以少创建的,组件既可以作为父组件,也可以作为子组件和兄弟组件。但如何让它们之间互相通信呢?

    大家用的比较多应该就是父子组件之间的通信了,父组件可以通过 props 给子组件传递参数,子组件可以通过 $emit 事件告诉父组件该干嘛干嘛了。

    那么如果要实现兄弟组件间的通信呢?兄弟组件基于同一个父组件,之前有一个比较传统的做法,比如要实现A组件和B组件两个兄弟组件的通信。

    就是A组件通过 $emit 告诉它爹,我这边ok了,然后父组件通过 watch 监听某个信息数据,信息数据发生变化了,那么可以告诉B组件去做后面的事情了,相当于父组件做了个中间商。

    听起来是不是很麻烦,那么 事件总线(EventBus) 就能很好的处理这类情况。

    EventBus简介 

    EventBus 又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念,就像是所有组件共用相同的事件中心,可以向该中心注册发送事件或接收事件,所以组件都可以上下平行地通知其他组件,但也就是太方便所以若使用不慎,就会造成难以维护的“灾难”,因此才需要更完善的Vuex作为状态管理中心,将通知的概念上升到共享状态层次。

    如何创建EventBus

    // main.js
    Vue.prototype.$bus = new Vue();

    这种方式初始化的 EventBus 是一个全局的事件总线,里面是没有声明绑定的事件。

    通过Vue的原型对象构建的时间总线,那么我们直接可以在项目中用 this 来调用。

    接着上面说的,我们要在A组件中,告诉B组件做一件事情,比如:吃饭。

    那么我们在A组件中绑定吃饭事件:

    onConfirm() {
                    //发出事件
                    this.$bus.$emit('eating', '吃饭啦');
                },

    eating 是事件名称,当出发了 onConfirm方法后,就可以发出事件,然后在B组件中挂载的注册监听,当A发出,B自然就能接收到了。

    mounted() {
                this.$bus.$on('eating', value => {
                    console.log(value);
                });
                            //=> '吃饭啦'
            },

    如何销毁

    由于事件总线非常消耗资源,所以记得在组件中销毁这些创建的事件。

    我们在可以在组件的被销毁之前去销毁它。

    beforeDestroy() {
            this.$bus.$off('eating'); //销毁事件
        },

    总结

    本文主要通过简单的实例学习了Vue中有关于 EventBus 相关的知识点。主要涉及了 EventBus 如何实例化,又是如何通过 $emit 发送事件,又是如何通过 $on 来接收事件和销毁事件。从实例中我们可以了解到, EventBus 可以较好的实现兄弟组件之间的数据通讯。

  • 相关阅读:
    js浏览器对象
    js对象
    js基础
    css的常见操作
    css 盒子模型
    css定位与浮动
    汇编三(习题)
    pyEcharts安装及使用指南(最新)
    pyEcharts安装及使用指南
    Anaconda安装第三方库与pip和conda 添加国内源
  • 原文地址:https://www.cnblogs.com/liao123/p/14698048.html
Copyright © 2011-2022 走看看