文章目录

• 消息订阅与发布
• • 理解
  • 使用步骤
• 改造TodoList为消息订阅与发布

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

消息订阅与发布

理解

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

• (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)}