美文网首页
22.Vue全局事件总线(GlobalEventBus)

22.Vue全局事件总线(GlobalEventBus)

作者: 黑咔 | 来源:发表于2019-04-10 12:00 被阅读0次
    1. 一种组件间通信的方式,适用于任意组件间通信

    2. 安装全局事件总线:

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

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

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

      B. 提供数据:this.$bus.$emit('xxxx',数据)

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

      beforeDestroy() {
        this.$bus.$off(xxx)
      }
    

    相关文章

      网友评论

          本文标题:22.Vue全局事件总线(GlobalEventBus)

          本文链接:https://www.haomeiwen.com/subject/liwyiqtx.html