消息订阅与发布(pubsub)

消息订阅与发布pubsub

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

pub：publish 发布

sub：subscribe 订阅

安装pubsub

npm i pubsub-js

使用pubsub

 先引入pubsub，再使用

订阅消息（接收数据）

<!-- School组件 -->
<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>

发布消息（提供数据）

<!-- 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>