vue2知识点：消息订阅与发布

在这里插入图片描述
@[toc]

3.23消息订阅与发布

3.23.1知识点总结

在这里插入图片描述

问题：“全局事件总线”和“消息订阅与发布”都可以实现任意组件间通信，那用哪个好？

答案：推荐使用“全局事件总线”，因为它是vue提供的，完全使用的vue技术，而“消息订阅与发布”则是第三方。

3.23.2案例

案例：跟全局事件总线一样，利用“消息订阅与发布”实现平行组件间通信，即学生组件发送数据给学校组件

注意点1：由于“消息订阅与发布”可依赖的第三方太多了，这里使用pubsub-js

注意点2：使用语法

消息订阅语法

import pubsub from 'pubsub-js'

mounted() {
this.pubId = pubsub.subscribe('hello',(msgName,data)=>{
    // console.log('有人发布了hello消息，hello消息的回调执行了',msgName,data)
})
},
beforeDestroy() {
    // this.$bus.$off('hello')
    pubsub.unsubscribe(this.pubId)
}

消息发布语法

import pubsub from 'pubsub-js'

pubsub.publish('hello',666)

注意点3：取消订阅方式和“全局事件总线”不同，取消订阅指定订阅返回的id，且每次返回的id都不同，而“全局事件总线”指定的是“自定义事件名称”

注意点4：订阅回调配置一定要使用箭头函数或者外部定义方法，在订阅中引用也行，千万不要使用普通函数，因为普通函数中this不指代vc，而是undefine，这一点跟“全局事件总线”中的注意点8很像，但还是略有不同

注意点5：消息订阅会接收到2个参数，第1个参数为消息名称，第2个参数才是传递过来的值，如写法1，但是实际msgName参数1他跟用不到它，所以可使用下划线“_”占个位，如写法2

写法1：

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

写法2：

this.pubId = pubsub.subscribe('hello',(_,data)=>{
    // console.log('有人发布了hello消息，hello消息的回调执行了',_,data)
})

注意点6：箭头函数中的名称(msgName,data)=>{}可以随便写，但是避免使用使用关键字名字

注意点7：如果想传递多个参数，需使用{}
发送方

sendToStudent2(){
  pubsub.publish('hello',{name:this.name, sex:this.sex})
}

接收方

mounted() {
    this.pubId = pubsub.subscribe('hello',(msgName, object)=>{
      console.log('有student1平行组件发布了hello消息，hello消息的回调执行了:',object.name, object.sex)
    })
  }

项目结构

在这里插入图片描述

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false

//创建vm
new Vue({
    el:'#app',
    render: h => h(App),
})

App.vue

<template>
    <div class="app">
        <h1>{{msg}}</h1>
        <School/>
        <Student/>
    </div>
</template>

<script>
    import Student from './components/Student'
    import School from './components/School'

    export default {
        name:'App',
        components:{School,Student},
        data() {
            return {
                msg:'你好啊！',
            }
        }
    }
</script>

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

Student.vue

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

<script>
    import pubsub from 'pubsub-js'
    export default {
        name:'Student',
        data() {
            return {
                name:'张三',
                sex:'男',
            }
        },
        mounted() {
            // console.log('Student',this.x)
        },
        methods: {
            sendStudentName(){
                // this.$bus.$emit('hello',this.name)
                pubsub.publish('hello',666)
            }
        },
    }
</script>

<style lang="less" scoped>
    .student{
        background-color: pink;
        padding: 5px;
        margin-top: 30px;
    }
</style>

School.vue

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

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

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