Vue-全局事件总线(GlobalEventBus)

浅浅的花香味﹌ 2023-10-12 19:36 62阅读 0赞

# 全局事件总线(GlobalEventBus) #

全局事件总线是vue中特别厉害的一种组件中通信的方式，它可以实现任意组件中通信，随便拿出来两个组件就能互通数据，就像对讲机一样，它在开发中用的也是特别的多

## 1 编写案例 ##

首先准备两个组件，它们之间是兄弟关系，被App统一管理

![ab81dc9db388cb499ba3cf4616b0fe10.png][]

简单的页面如下

![f598c686285844438aa71b9460e6826b.png][]

## 2 安装全局事件总线 ##

在main.js中定义$bus(总线)，因为main.js是整个程序的入口，然后在vm中使用钩子函数beforeCreate,在vm创建前就创建，这样全局的vc以及vm都可以看到它了

![6793e388aae3d86eff91f2e7e318622b.png][]

beforeCreate(){
             // 安装全局事件总线
            Vue.prototype.$bus=this
        }

## 3 组件传递数据使用中线 ##

安装好了全局事件之后，就可以使用了，下面演示在兄弟组件传递数据

![6b45fdb009df0fb6fd925b98d025f0fc.png][]

![223c1524e9e41838f0c828dc52726ed8.png][]

## 4 组件销毁之前解绑事件 ##

因为所有人都在用总线，如果有一天组件以及被销毁掉了，那么这个组件还占用总线，就会占用资源，所以最好在组件销毁之前解绑事件

![c875f4e7bef296b589b224b3617ffe8b.png][]

## 5 总结 ##

1.  一种组件间通信的方式，适用于任意组件间通信
2.  安装全局事件总线：

new Vue({
            ......
            beforeCreate() {
                    Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
            },
        ......
    })

1.  使用事件总线：
    
    1.  接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。
    2.      methods(){
              demo(data){......}
            }
            ......
            mounted() {
              this.$bus.$on('xxxx',this.demo)
            }
    3.  提供数据：his. b u s . bus. bus.emit(‘xxxx’,数据)
2.  最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。

[ab81dc9db388cb499ba3cf4616b0fe10.png]: https://img-blog.csdnimg.cn/img_convert/ab81dc9db388cb499ba3cf4616b0fe10.png
[f598c686285844438aa71b9460e6826b.png]: https://img-blog.csdnimg.cn/img_convert/f598c686285844438aa71b9460e6826b.png
[6793e388aae3d86eff91f2e7e318622b.png]: https://img-blog.csdnimg.cn/img_convert/6793e388aae3d86eff91f2e7e318622b.png
[6b45fdb009df0fb6fd925b98d025f0fc.png]: https://img-blog.csdnimg.cn/img_convert/6b45fdb009df0fb6fd925b98d025f0fc.png
[223c1524e9e41838f0c828dc52726ed8.png]: https://img-blog.csdnimg.cn/img_convert/223c1524e9e41838f0c828dc52726ed8.png
[c875f4e7bef296b589b224b3617ffe8b.png]: https://img-blog.csdnimg.cn/img_convert/c875f4e7bef296b589b224b3617ffe8b.png