（三十三）Vue之消息订阅与发布

上一篇：（三十二）Vue之全局事件总线

下一篇：（三十四）Vue之新生命周期钩子nextTick

消息订阅与发布

理解

这种方式的思想与全局事件总线很相似，一种组件间通信的方式，适用于任意组件间通信。
它包含以下操作:

• (1) 订阅消息 --对应绑定事件监听
• (2) 发布消息 --分发事件
• (3) 取消消息订阅 --解绑事件监听

需要引入一个消息订阅与发布的第三方实现库: PubSubJ
在线文档: https://github.com/mroderick/PubSubJS

使用步骤

第一步：使用npm i pubsub-js把第三方实现库PubSubJ安装
第二步：在用到的组件使用import pubsub from 'pubsub-js'引入
第三步：接收数据

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

第四步：提供数据

pubsub.publish('xxx',数据)

第五步：在beforeDestroy钩子中取消消息订阅

PubSub.unsubscribe(pid)

改造TodoList为消息订阅与发布

我们把给Item组件与App组件的交互从全局事件总线替换成消息订阅与发布
第一步：使用npm i pubsub-js安装
第二步：在Item组件与App组件使用import pubsub from 'pubsub-js'引入
第三步：Item组件提供数据

  methods:{
    handleCheck(id){
      //console.log(id)
      //通知App组件将对应的todo对象的done取反
      //this.checkTodo(id)
      //this.$bus.$emit('checkTodo',id)
      pubsub.publish('checkTodo',id)
    },
    handleDelete(id){
      if (confirm('确定删除吗？')) {
        //通知App组件将对应的todo对象
        //console.log(id)
        //this.deleteTodo(id)
        //this.$bus.$emit('deleteTodo',id)
        pubsub.publish('deleteTodo',id)
      }
    }
  }

第四步：App组件接收数据

	mounted() {
    /*this.$bus.$on('checkTodo',this.checkTodo)
    this.$bus.$on('deleteTodo',this.deleteTodo)*/
    this.pubId1 = pubsub.subscribe('checkTodo',this.checkTodo)
    this.pubId2 = pubsub.subscribe('deleteTodo',this.deleteTodo)
  }

第五步：App组件在beforeDestroy钩子中取消消息订阅

	beforeDestroy() {
    /*this.$bus.$off('checkTodo')
    this.$bus.$off('deleteTodo')*/
    pubsub.unsubscribe(this.pubId1)
    pubsub.unsubscribe(this.pubId2)
  }