在Vue中实现消息订阅与发布(pubsub)

首先需要安装一个库

1.当在终端运行过npm run serve后，按下Ctrl+C退出终端

    ![](https://img-blog.csdnimg.cn/6c0101ed764744ca973a30b5ece9c97d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Y2_6Z-z,size_18,color_FFFFFF,t_70,g_se,x_16)

2.然后会出现终止批处理操作选择yes

    ![](https://img-blog.csdnimg.cn/2ad5c26d6a9f4505aa9f046e1898090e.png)

3.输入npm i pubsub-js (当然也有其他的库，自己选择)

4.安装成功

    ![](https://img-blog.csdnimg.cn/03d5ac0ca65e40d98d8812c264dd76f1.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Y2_6Z-z,size_20,color_FFFFFF,t_70,g_se,x_16)

** 消息订阅与发布(pubsub)**

    1.一种组件间通信方式，适用于任意组件间通信。
     2.使用步骤：
             1.安装pubsub：npm i pubsub-js
             2.引入：import pubsub from 'pubsub-js'     在A组件和B组件

    ![](https://img-blog.csdnimg.cn/774acce97d2144649e83377e61ea563f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Y2_6Z-z,size_18,color_FFFFFF,t_70,g_se,x_16)
     3.接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身
         这是一种方法：

    ![](https://img-blog.csdnimg.cn/86a8176814f34ba7a816f7aea7b7bd6d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Y2_6Z-z,size_20,color_FFFFFF,t_70,g_se,x_16)

    第二种方法：

    ![](https://img-blog.csdnimg.cn/ff939f676d074ee6b1ae108128d96c30.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Y2_6Z-z,size_20,color_FFFFFF,t_70,g_se,x_16)
     4.提供数据：pubsub.publish('xxx',数据)  在B组件

            ![](https://img-blog.csdnimg.cn/0f17f6815cff4a4083f01638e19c389d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Y2_6Z-z,size_20,color_FFFFFF,t_70,g_se,x_16)
     5.最好在beforeDestroy钩子中，用PubSub.unsubscribe(pubId)去取消订阅

     ![](https://img-blog.csdnimg.cn/19abb1c204874e42a487f552d75483a9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Y2_6Z-z,size_20,color_FFFFFF,t_70,g_se,x_16)

运行结果：

所有代码：

    组件A：

<template>
    <div class="school">
        <h2>学校名称：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>
    </div>
</template>

<script>
    import pubsub from 'pubsub-js'
    export default{
        name:'School',
        data(){
            return{
                name:'快乐的小孩',
                address:'北京'
            }
        },
        mounted(){
            this.pubId = pubsub.subscribe('hello',(msgName,data)=>{
                // console.log(this)
                console.log('有人发布了hello消息，hello消息的回调执行了',msgName,data)
            })
        },
        beforeDestroy(){
            pubsub.unsubscribe(this.pubId)     //取消订阅
        }
    }
</script>
<style scoped>
    .school{
        background-color: aquamarine;
        padding: 5px;
    }
</style>

组件B：

<template>
    <div class="test">
        <h2>学生姓名：{{name}}</h2>
        <h2>学生性别：{{sex}}</h2>
        <button @click="sendStudentName">把学生名给School组件</button>
    </div>
</template>

<script>
    import pubsub from 'pubsub-js'
    export default{
        name:'Student',
        data(){
            return{
            name:'张三',
            sex:'男'
            }
        },
        methods:{
            sendStudentName(){
                pubsub.publish('hello',666)
            }
        }
    }
</script>
<style lang="less" scoped>
    .test{
        background-color: orchid;
        padding: 5px;
        margin-top: 30px;
    }
     
</style>