Vue全局事件总线（GlobalEventBus）

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

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

1. 一种组件间通信的方式，适用于任意组件间通信。

2. 安装全局事件总线：

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

3. 使用事件总线：

   1. 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。

      methods(){
        demo(data){......}
      }
      ......
      mounted() {
        this.$bus.$on('xxxx',this.demo)
      }
      

   2. 提供数据：this.$bus.$emit('xxxx',数据)

4. 最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。

__EOF__

本文作者：HuangJiaZ
本文链接：https://www.cnblogs.com/HuangJiaZ/p/15935532.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！