消息订阅与发布是使用第三方库pubsub-js，实现任意组件间通信

pub：publish 发布

sub：subscribe 订阅

安装pubsub

<pre style="margin: 0px; padding: 0px; transition-duration: 0.2s; transition-property: background, font-size, border-color, border-radius, border-width, padding, margin, color; overflow: auto; font-family: "Courier New", serif; font-size: 12px; overflow-wrap: break-word;">npm i pubsub-js</pre>

使用pubsub

先引入pubsub，再使用

订阅消息（接收数据）

消息订阅与发布是使用第三方库pubsub-js，实现任意组件间通信

pub：publish 发布

sub：subscribe 订阅

安装pubsub

使用pubsub

先引入pubsub，再使用

订阅消息（接收数据）

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

<script>
    **//引入pubsub
 import pubsub from 'pubsub-js'** export default {
        name:'School',
        data() { return {
                name:'幼儿园大班',
                address:'上海',
            }
        },
        mounted() { //订阅消息，会返回一个订阅的ID，取消订阅时需要用到
            //第一个参数为消息名，这里是hello
            //第二个参数是回调函数，这里是一个匿名的，用于接收消息
            this.pubId = **pubsub.subscribe**('hello',(msgName,data)=>{
                console.log(this)//undefined，因为是第三方的库
 console.log('有人发布了hello消息，hello消息的回调执行了',msgName,data)
            })
        },

        beforeDestroy() { //组件销毁前，取消订阅
 **pubsub.unsubscribe(this****.pubId)**
        },
    } </script></pre>

发布消息（提供数据）

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

<script>
    **//引入pubsub
 import pubsub from 'pubsub-js'** export default {
        name:'Student',
        data() { return {
                name:'张三',
                sex:'男',
            }
        },

        methods: {
            sendStudentName(){ **//发布消息，hello是消息名，后面的是数据
 pubsub.publish('hello',666****)**
            }
        },
    } </script></pre>
发布消息（提供数据）
<!-- Student组件 -->
<template>
    <div class="student">
        <h2>学生姓名：{{name}}</h2>
        <h2>学生性别：{{sex}}</h2>
        <button @click="sendStudentName">把学生名给School组件</button>
    </div>
</template>

<script>
    //引入pubsub
    import pubsub from 'pubsub-js'
    export default {
        name:'Student',
        data() {
            return {
                name:'张三',
                sex:'男',
            }
        },
    
        methods: {
            sendStudentName(){
                //发布消息，hello是消息名，后面的是数据
                pubsub.publish('hello',666)
            }
        },
    }
</script>