全局事件总线(globalEventBus)

本文主要是介绍全局事件总线(globalEventBus)，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

在Vue里我们可以通过全局事件总线来实现任意组件之间通信,它的原理是给Vue的原型对象上面添加一个属性,这样的话我所有组件的都可以访问到这个属性,然后可以通过这个属性来访问其他组件给这个属性上面绑定的一些方法从而去传递数据,而且这个属性还可以去访问Vue实例对象上的方法,因为Vue组件构造函数的原型对象的原型对象是指向Vue的原型对象的(VueComponent.protoType.proto=Vue.protoType),我们每次去创建一个组件,Vue都会去调用Vue.extend帮我们创造一个新的VueComponent构造函数,我们只要去使用组件标签,Vue会在解析的时候帮我们创建组件的实例对象,然后把我们需要的配置传进去

特别注意:每个组件的VueComponent都是不同的

配置全局事件总线

new Vue({
    ... ...
    beforeCreate() {
        Vue.protoType.$bus = this   //$bus名字可以随便写,但是标准写法$bus,为了违和Vue的设计,这里的this是指向Vue的实例对象,因为在beforeCreate里Vue才只是刚开始初始化数据,但是这里的this已经是指向Vue的实例对象了    
    }
    ... ...
})

使用:

1.接收数据,A组件想接收B组件的数据,A组件需要现在自身里给$bus绑定自定义事件,然后B组件再去通过$emit触发$bus上的自定义事件,再去给里面传递参数,这样A组件就可以接收到数据

//  A组件
methods:{
    demo(demo) {    //demo就是B组件传递过来的数据
        ... ...
    }
        
},
​
mounted() {
    this.$bus.on('xxx',this.demo)   //给A组件绑定自定义事件
}   

//  B组件
​
this.$bus.$emit('xxx',数据)

建议:最好在beforeDestroy钩子中,通过this.$bus.$off('xxx')解绑自定义事件

这篇关于全局事件总线(globalEventBus)的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！