vue消息的订阅与发布(pubsub)

VIP文章轻描淡贤

已于 2022-09-09 14:41:19 修改

阅读量587

点赞数

文章标签： vue.js javascript 前端

于 2022-09-09 14:38:21 首次发布

本文链接：https://blog.csdn.net/m0_53620958/article/details/126782454

版权

vue消息的订阅与发布

一种组件间通信的方式，适用于任意组件间的通信
1、首先在VSCode终端输入 npm i pubsub-js 安装pubsub（第三方库）
2、引入到组件中使用 import pubsub from 'pubsub-js'
3、接收数据：A组件想接收数据（消息订阅），B组件提供数据（消息发布）A、B组件中均需引入import pubsub from ‘pubsub-js’
4、方式：
1、A接收数据(即A组件中订阅消息，订阅的回调（函数）留在A组件自身)

methods:{
    demo(data){
        console.log(this)//此处this是vc组件实例对象
        console.log('发布hello消息,hello消息的回调被执行了',data)
    }
},
mounted() {
    //此种是全局事件总线方式
    // console.log(this)
    // console.log('School',this.$bus)
    // this.$bus.$on('hello',(data)=>{
    //  //函数体
    //  console.log('school',data)
    // })
    // this.pubid=pubsub.subscribe('hello',function(msgName,data){
    //     console.log(this)  //this是undefine
    //     console.log('发布hello消息,hello消息的回调被执行了',data)
    /