说说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 可以较好的实现兄弟组件之间的数据通讯。

原文地址:https://www.cnblogs.com/liao123/p/14698048.html