1.知识点

是一种组件间通信的方式，适用于任意组件间通信

2.使用步骤

“消息订阅与发布”可依赖的第三方很多，这里使用pubsub-js库

1.安装pubsub：npm i pubsub-js

2.引入：import pubsub from 'pubsub-js'

3.接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件中

   methods(){

     demo(data){......}

 }

 ......

mounted(){

    this.pid = pubsub.subscribe('xxx',this.demo)   //订阅消息 

}

4.提供数据：

   pubsub.publish('xxx',数据)

5.最好在beforeDestroy钩子中，用pubsub.unsubscribe(pid)取消订阅

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

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

使用语法

消息订阅 语法

import pubsub from 'pubsub-js'mounted() {
this.pubId = pubsub.subscribe('hello',(msgName,data)=>{// console.log('有人发布了hello消息，hello消息的回调执行了',msgName,data) //msgName为事件名hello data才是接收到的数据
})
},
beforeDestroy() {// this.$bus.$off('hello')   pubsub.unsubscribe(this.pubId)  //这里注意不是跟全局事件总线一样是hello事件名
}

消息发布 语法

import pubsub from 'pubsub-js'pubsub.publish('hello',666)

3.注意点：

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

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

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

写法一：

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

写法二：

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

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

 完整代码

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>

参考文章：vue2知识点：消息订阅与发布_vue2消息订阅与发布_刘大猫.的博客-CSDN博客