zj-Exercise/vue/vue_test/14_src_消息订阅与发布/components/School.vue

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

<script>
    import pubsub from 'pubsub-js'
    export default {
        name:'School',
        props:['getSchoolName'],
        data() {
            return {
                name:'尚硅谷',
                address:'北京'
            }
        },
        methods:{
            demo(msgName,data){
                console.log('有人发布了hello消息，hello消息的回调执行了',msgName,data)
            }
        },
        mounted(){
            // console.log('School',this.x)
            // this.$bus.$on('hello',(data) => {
            //     console.log('我是School组件，收到了数据',data)
            // })
            // this.pubId = pubsub.subscribe('hello',function(msgName,data){
            //     console.log(this) //undefined
            //     // console.log('有人发布了hello消息，hello消息的回调执行了',msgName,data)
            // })

            // 换成箭头函数
            // this.pubId = pubsub.subscribe('hello',(msgName,data) => {
            //     console.log(this) //VueComponent
            //     // console.log('有人发布了hello消息，hello消息的回调执行了',msgName,data)
            // })

            // 或者将方法放到methods里面
            this.pubId = pubsub.subscribe('hello',this.demo)
        },

        beforeDestroy(){
            // this.$bus.$off('hello')
            pubsub.unsubscribe(this.pubId)
        }
    }
</script>

<style scoped>
    .school{
        background-color: skyblue;
        padding: 5px;
    }
</style>