Vue 2.x – TodoList案例优化(消息订阅与发布)

消息订阅与发布(pubsub)

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

TodoList优化

App.vue

Snipaste_2021-08-25_13-37-45.png

Snipaste_2021-08-25_13-39-35.png

MyItem.vue

Snipaste_2021-08-25_13-40-51.png

版权声明:
作者:Ne-21
链接:https://blog.gocos.cn/archives/127.html
来源:云淡风轻
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
海报
Vue 2.x – TodoList案例优化(消息订阅与发布)
消息订阅与发布(pubsub) 一种组件间通信的方式,适用于任意组件间通信。 使用步骤: 安装pubsub:npm i pubsub-js 引入: import pubsub from '……
<<上一篇
下一篇>>