【Vue2.0学习】—消息订阅与发布（六十二）

【Vue2.0学习】—消息订阅与发布（六十二）

第一步：安装​​npm i pubsub​​

npm i pubsub-js

第二步：引入

import pubsub from 'pubsub-js'

第三步：接收数据 A组想接收数据，则在A组中订阅消息，订阅的回调留在A组件自身。

第四步：提供数据

pubsub.publish('XXX',数据）

第五步：最好在​​beforeDestroy​​​钩子中，用 ​​pubsub.unsubscribe(pid)​​去取消订阅

Student.vue

<template>
  <div class="box">
    <h2>学生姓名：{{name}}</h2>
    <h2>学生年龄：{{age}}</h2>
    <button @click="sendStudentName">把学生名给School组件</button>
 </div>
</template>

<script>
import pubsub from 'pubsub-js'
export default {
    name:'Student',
   
    data(){
        return{
            name:'王同学',
            age:20
        }
    },
  methods:{
    sendStudentName(){
        // this.$bus.$emit('hello',666)
        pubsub.publish('hello',666)
    }
  }
   

}
</script>

<style scoped>
.box{
    background-color: skyblue;
}

</style>

School.vue

<template>
    <div class="demo">
        <h2>学校名称：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>
        <!-- 
        全局事件总线(GlobalEventBus)
        一种组件间通信的方式，适用于任意组件间通信
        安装全局事件总线
     -->
    </div>
</template>

<script>
    import pubsub from 'pubsub-js'
    export default {
        name: 'School',

        data() {
            return {
                name: 'B站大学',
                address: '上海'
            }
        },
        mounted() {
            // this.$bus.$on('hello',(data)=>{
            //     console.log('我是School组件，收到了数据',data)
            // })
            this.pubId = pubsub.subscribe('hello', (msgname, data) => {
                //  console.log(this)//vm
                console.log('有人发布了hello消息，hello消息的回调执行了', msgname, data)

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


    }
</script>

<style scoped>
    .demo {
        background-color: orange;
    }
</style>