vue常用之任意组件间通信“消息订阅与发布“

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

  2. 使用步骤:

    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)去取消订阅。

案列展示:(兄弟组件间的通信)

1.A组件中--订阅消息pubsub.subscribe





2.B组件中--提供数据pubsub.publish






你可能感兴趣的:(vue常用,vue.js,javascript,消息的订阅,vue,组件通信)