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