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

Posted 2022-11-23 王同学要努力

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