Vue中全局事件总线的使用(一看就会)

Vue中适用于任意组件间的一种通信方式

---

前言

例如：针对图中的A组件和B-a组件，它们既不是父子组件，也不是兄弟组件。此时，我们可以考虑使用全局事件总线进行值传递。

---

具体使用方式如下: 

假设任意组件B中需要任意组件A中的某些数据

一、main.js中安装事件总线

  new Vue({
        el: '#app',
        router,
        components: { App },
        beforeCreate() {
            Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
        },
        template: ''
    })

二、组件A中发送数据

// ComponentA.vue

三、组件B中接收数据

// ComponentB.vue

四、组件B中销毁全局事件总线

为避免免造成内存泄漏，使用时要注意销毁全局事件总线，在哪里接收数据，就在哪销毁，

销毁不影响二次使用

// ComponentB.vue

总结

B组件接收A组件的值，4个步骤:

        1. main.js中安装全局事件总线

        2. 组件A中用this.$bus.$emit('事件名'，val)发送要传的数据

        3. 组件B中用this.$bus.$on('事件名'，callback) 监听(接收)A传过来的数据

        4. 组件B中this.$bus.$off('事件名')移除事件监听(销毁全局事件总线)