消息订阅与发布pubsub

消息订阅与发布pubsub"/>

消息订阅与发布pubsub

消息订阅与发布

1. 订阅消息：消息名
2. 发布消息：消息内容

A组件想使用C组件里面的东西，A需要数据，C是提供者。

在A组件里面订阅一个消息，假设订阅的消息名叫做Demo，指定回调函数叫test；C发布消息，消息名也必须是Demo，数据是666。A订阅消息test函数触发调用，666就会传到test函数。

任何一个框架里面都可以使用pubsub–js进行消息的订阅与发布。

安装pubsub库

npm i pubsub-js@1.6.0

引用库

import pubsub from 'pubsub-js'

pubsub是个对象,含有很多有用的方法.School组件挂载完毕马上订阅消息

    mounted() {pubsub.subscribe('hello',function name(params) {console.log('有人发布了hello消息，hello消息的回调执行了');})}

以上是School组件订阅消息，下面是Student组件发布消息

    mounted() {this.pubId= pubsub.subscribe('hello', (msgName,data) =>{console.log('有人发布了hello消息，hello消息的回调执行了', msgName, data);})},beforeDestroy() {pubsub.unsubscribe(this.pubId)}

总结

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. 最好在beforeDestory钩子中，用 pubsub.unsubscribe(pId)取消订阅

TodoList的消息订阅与发布实践

App组件需要数据，删除id
MyItem提供数据，发布消息

App消息订阅

App引入库,然后订阅消息deleteTodo

 deleteTodo(_,id) {this.todos = this.todos.filter((todo) => {return todo.id!==id})},，

第一个参数是消息名，但是消息名会显示为灰色因为定义了没有使用，所以更好的是使用_占位符，这样才可以保证收到的是正常的参数。
订阅消息之后再销毁之前再取消订阅

  mounted() {this.$bus.$on('checkTodo', this.checkTodo)// this.$bus.$on('deleteTodo', this.deleteTodo)this.pubId= pubsub.subscribe('deleteTodo',this.deleteTodo)},beforeDestroy() {this.$bus.$off('checkTodo')// this.$bus.$off('deleteTodo')pubsub.subscribe( this.pubId)}

MyItem消息发布

   handleDelete(id) {if (confirm('确定删除吗？')) {pubsub.publish('deleteTodo',id)}}if (confirm('确定删除吗？')) {pubsub.publish('deleteTodo',id)}}