网站建设 域名主机,钱币网站建设,网页设计免费网站推荐,wordpress开源博客系统文章目录消息订阅与发布理解使用步骤改造TodoList为消息订阅与发布上一篇#xff1a;#xff08;三十二#xff09;Vue之全局事件总线
消息订阅与发布
理解
这种方式的思想与全局事件总线很相似#xff0c;一种组件间通信的方式#xff0c;适用于任意组件间通信。 它包…
文章目录消息订阅与发布理解使用步骤改造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)}
