订阅消息:消息名
发布消息:消息内容
使用的插件:pubsub-js(publish发布 subscribe 订阅 )
首先:终端安装
npm i pubsub-js
首先需要数据的订阅数据的对象--即收数据的对象 引入该库 --学生给学校发 消息学校订阅
import pubsub from'pubsub-js'
消息订阅完成后要销毁--法1
传递的参数(消息名称,消息内容)
pubsub.subscribe--- pubsub.unsubscribe 订阅
pubsub.publish---发布
mounted() {
/*挂载完成订阅消息*/
this.pubId=pubsub.subscribe('send',(msgName,data)=>{
console.log(this)//vm 如果写function就不是了
console.log('有人订阅了send消息,send消息回调执行了',msgName,data)
})
},
beforeDestroy() {
// this.$bus.$off('send');//销毁
pubsub.unsubscribe(this.pubId)
},
法2:使用method this指向正确
methods: {
demo(msgName,data){
console.log(this)//vm 如果写function就不是了
console.log('有人订阅了send消息,send消息回调执行了',msgName,data)
}
},
mounted() {
//console.log(this.x)
// this.$bus.$on('send',(data)=>{
// console.log('school组件,收到了数据:',data)
// })
/*挂载完成订阅消息*/
this.pubId=pubsub.subscribe('send',this.demo)
}
发布消息的也要引入插件
import pubsub from'pubsub-js'
methods: {
sendStudentNameToSchool(){
//触发x的方法 回调在学校里面
// this.$bus.$emit('send',this.name)
pubsub.publish('send',this.name)
}
},
1、一种组件间的通信方式,用于任意组件间的通信
2、使用
安装: npm i pubsub-js
引入: import pubsub from'pubsub-js'(发布的订阅的都要引入)
接收数据的: mounted() {
this.pubId=pubsub.subscribe('xxx',(msgName,data)=>{
有人订阅了xxx消息,send消息回调执行了
})
},
提供数据的: pubsub.publish('xxx',data)
销毁: beforeDestroy()钩子中 pubsub.unsubscribe(this.pubId) 取消订阅
但是总线比较多