文章目录
消息订阅与发布
理解
这种方式的思想与全局事件总线很相似，一种组件间通信的方式，适用于任意组件间通信。
它包含以下操作:
- (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)
}