要点：
但是对应vue框架来说,全局事件总线要比消息的订阅与发布要好,因为全局事件总线,是靠vue实现的,不需要去安装别的第三方库了、
对比全局事件总线,其实就是把哪个$bus（x）换成了pubsub
订阅指的就是需要数据的
发布则为提供数据的
这边这个模型中,假如a需要收到c的一些数据,也就是说,a时需要数据的也就是订阅,而c是发送数据的也就是发布,
当我们定义订阅的时候,写入一个订阅的名字.然后在加上一个函数,当订阅被接受,也就是订阅的内容被发布,就会调用到这边的test函数,
而在发布时,要写入一个订阅的名字,一定要一样,其中还带着参数,,就可以实现,当订阅demo被发布时,会触发test函数,而函数中的参数就是c组件发过来的数据
然儿在原生js中没有消息的订阅和发布所以我们可以用到js第三方库（pubsub-js）,引用它就可以在任何一个框架上实现消息的订阅和发布
实现一个小案例 实现兄弟组件的消息的订阅和发布
student提供数据,school接受数据
1.安装第三方库
pubsub-js （-js别忘了写）
2.引用第三方库,这边的pubsub是一个对象里面有许多有用的方法
3.实现消息的订阅
pubsub.subscribe('消息名',function(){
console.log('xxxx')
})
这就实现了一个简单消息的订阅
同样在student组件上（发送数据）引入第三方库,并且写入
pubsub.publish('hello',666)
实现了订阅与发布
然后在把数据给显示出来
如果像之前那样写的话
发现显示的时消息名
因为这边和之前的有点不太一样,这边其实有两个第一个为消息名,第二个才为你传过来的数据
验证：
这边和之前说的全局事件总线一样有组件关闭需要销毁掉订阅的情况
但是如果像全局事件那样写方法后的参数就会错,就像下图一样时错误写法
因为这边的订阅和定时器一样,每次执行都会生成一个id需要通过id来进行关闭
而下面这么写还是不好,因为如果这么写的话,beforeDestroy读不到pubId
非常简单只需要,定义到this上这边指这个组件的实例对象上,就可以读到了
pubsub.unsubscribe(this.pubId)
但是如果这边写this的话,就会发现this不是vc
发现this是undefined,因为在组件上如果用的是vue的方法,使用了普通函数this指向就是对应的组件实例对象,但是这边使用的是第三方库,pubsub-js,如果还用普通的函数,也就是vue没有帮你处理这个this,也就为undefined,和之前一样使用箭头函数就能解决
使用箭头函数就能解决
或者使用现在methods上定义好方法,注意这边方法的参数第一个为消息名,第二个或第二个以后才是传入的数据,然后在this.pubId=pubsub.subscribe('消息名',this.被调用的方法名)
总结：
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/40179.html