Vue任意组件间通信

导读:本篇文章讲解 Vue任意组件间通信,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

全局事件总线(GlobalEventBus)

  • 一种组件间通信的方式,适用于任意组件间通信。
  • 安装全局事件总线:

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

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

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

       2. 提供数据:this.$bus.$emit(‘xxxx’,数据)

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

消息订阅与发布(pubsub)

  • 一种组件间通信的方式,适用于任意组件间通信。
  • 使用步骤:

       1. 安装pubsub:npm i pubsub-js

       2. 引入: import pubsub from ‘pubsub-js’

       3. 接收数据:A组件想接收数据,则在A组件中订阅消息,订阅的回调留在A组件自身。

          methods(){
            demo(data){......}
          }
          ......
          mounted() {
            this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息
          }

       4. 提供数据:pubsub.publish(‘xxx’,数据)

       5. 最好在beforeDestroy钩子中,用“`PubSub.unsubscribe(pid)“`去取消订阅。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/6238.html

(0)
小半的头像小半

相关推荐

极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!