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>
