消息订阅与发布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)
      }
    }