1. 定义
消息订阅与发布是一种组件间通信的方法。适用于任意组件。
pubsub 是由两个单词组成：publish 和 subscribe 发布和订阅。
设计思路：订阅者可以理解为接收数据的组件，发布者理解为提供数据的组件。在订阅者组件里预定一个消息名，然后是一个回调函数；当发布者组件里调用相同的消息名的时候，订阅者的回调函数被执行。这个过程中实现通信。
目前第三方由很多库是可以实现这个功能的，比如 pubsub
2. 使用步骤
- 安装第三方库：
npm i pubsub-js - 引入：
import pubsub from "pubsub-js" - 接收数据的组件：A组件想要接收数据，则在A组件中订阅消息，订阅的回调留在 A 中
methods(){
demo(data){....}
}
...
mounted(){
this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息
}
- 提供数据：
pubsub.publish('xxx', 数据) - 最好在
beforeDestroy·钩子中，用pubsub.unsubscribe(pid)去取消订阅。
3 案例
说明：兄弟组件 Student, School 和 父级组件 App，现在我们要把Student组件里的 name 数据给到 Student 和 App
//App.vue
<script>
//import 引入所有组件
import Student from './components/Student.vue'
import School from './components/School.vue'
import PubSub from 'pubsub-js'
export default {
name: "App", // 给app组建命名为 App
//注册注册组件 components: { School,Student },
components: {School,Student},
data(){
return {
msg:"你好啊",
}
},
mounted(){
this.pid = PubSub.subscribe("studentName2", (name,data)=>{
console.log('我是app组件，我收到了发布者的信息', name,data)
this.msg = this.msg + data
})
},
beforeDestroy(){
PubSub.unscribe(this.pid)
}
}
</script>
//School.vue
<script>
import PubSub from 'pubsub-js'
export default {
name:"School",
data(){
return {
msg2: "尚硅谷",
address:"长安区"
}
},
mounted(){
this.pid = PubSub.subscribe('studentName1', (name,data)=>{
console.log('我是订阅组件，从发布组件接收到了信息', name,data)
})
},
beforeDestroy(){
PubSub.unsubscribe(this.pid)
}
}
</script>
//Student.vue
<script>
import PubSub from 'pubsub-js'
export default {
name: "Student",
data(){
return {
name: "Jackie",
age:18
}
},
methods: {
//把数据给School组件
sendStudentName(){
PubSub.publish('studentName1',this.name)
},
//把数据给App组件
sendNameToApp(){
PubSub.publish('studentName2',this.name)
}
}
}
</script>
