消息订阅与发布

除了全局事件总线能实现任意组件之间的通信,消息订阅与发布也能实现

需要数据的人订阅消息,提供数据的人发布消息;这里要注意:你订阅时是什么名,发布时就要用什么名

 

先安装这个库

 

然后引入库

 

订阅消息使用pubsub.subscribe('消息名',回调函数)

msgName:消息名

data:发布消息携带的数据

 

发布消息使用pubsub.publish('消息名',携带参数) 

取消订阅pubsub.unsubscribe('订阅名id')类似我们之前的定时器

总结

* 一种组件间通信的方式,适用于`<span style="color:red">`任意组件间通信。
* 使用步骤:
  1. 安装pubsub:``npm i pubsub-js``
  2. 引入: ``import pubsub from 'pubsub-js'``
  3. 接收数据:A组件想接收数据,则在A组件中订阅消息,订阅的`<span style="color:red">`回调留在A组件自身。

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

* 提供数据:``pubsub.publish('xxx',数据)``
* 最好在beforeDestroy钩子中,用 ``PubSub.unsubscribe(pid)``去`<span style="color:red">`取消订阅。

TodoList_pubsub

修改MyItem里面的删除功能用发布订阅实现

App.vue需要MyItem的数据,因此MyItem是发布消息,App.vue是订阅消息

因为我们订阅回来的数据是有俩个的而如果我们监听到了这个消息就响应deleteTodo方法,注意的一点是它第一个参数是消息名,第二个才是我们要的id,因此我们使用_占个位

 发送消息 

猜你喜欢

转载自blog.csdn.net/weixin_64612659/article/details/129782332