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