学习笔记：Vue任意组件间通信----消息订阅与发布

目录

        一. 因为消息订阅发布不是原生js和Vue自带的，所以需要下载第三方库

二 引入pubsub-js

三 订阅消息

四 发布消息

五 取消订阅（解绑）

六 总结

---

一. 因为消息订阅发布不是原生js和Vue自带的，所以需要下载第三方库

• 通过 npm 安装 （npm install pubsub-js)
• 通过CDN使用：pubsub-js CDN by jsDelivr - A CDN for npm and GitHub

二 引入pubsub-js

import pubsub from 'pubsub-js'

三 订阅消息

在需要接收数据的组件库中编写订阅消息的代码

        mounted() {
            this.pId = pubsub.subscribe('消息名',(messageName,data) =>{
                console.log('消息名称'+messageName + '----' + '传递数据' + data);
            })
        },

这里的messageName是回调函数自带的，无论你传不传参都会占据第一个形参位置，所以使用的时候要用任意名字代替（推荐使用_因为有高亮效果，也比较方便）

四 发布消息

         pubsub.publish('消息名',data)：就这一句代码即可，非常简单

五 取消订阅（解绑）

        取消订阅也很简单，不过需要注意的是取消订阅要使用每个订阅的独特的id名，这个id在函数运行完后会自动返回给函数，所以可以直接拿到id（见上图）

        还是一句代码即可：pubsub.unsubscribe(this.pId);最好是放在销毁钩子里。

六 总结

        因为消息订阅发布比较简单，这里把自己很菜的笔记发给大家看看：

一 定义：一种！任意组件！间的通信方式
二 使用步骤：
    1 安装pubsub-js第三方库
    2 引入pubsub：import 'pubsub' from 'pubsub-js'
    
    3 发布消息：（发送数据的组件里发布消息）
    methods:{
        send(){
            pubsub.publish('消息名称', data)
        }
    }       

    4 订阅消息: (接收数据的组件里书写订阅消息的回调)
    mounted(){
        this.pId = pubsub.subscribe('消息名称',(messageName,data)=>{
            xxxxx
        })
    }
    messageName无需在发布消息里传参，本身就有，是消息名称,一般用_占位！！！！
    记得在订阅消息的组件里取消订阅
    ！！每一个订阅都有一个唯一的id，要利用这个id来取消订阅，和解绑自定义事件不同

    5 取消订阅
    beforeDestroy(){
        pubsub.unsubscribe(this.pId)
    }

    切记！在发送数据的组件里发布消息，在接受数据的组件里订阅消息并取消订阅

这个比较简单哈，写这个笔记主要是因为笔者经常把事件总线里面的绑定事件和触发事件搞混淆，害怕消息与订阅也混淆（太菜了 呜呜呜），所以比较水的写了以下，大家别掏我qqq!!