12-消息订阅与发布

1. 定义

消息订阅与发布是一种组件间通信的方法。适用于任意组件。
pubsub 是由两个单词组成：publish 和 subscribe 发布和订阅。
设计思路：订阅者可以理解为接收数据的组件，发布者理解为提供数据的组件。在订阅者组件里预定一个消息名，然后是一个回调函数；当发布者组件里调用相同的消息名的时候，订阅者的回调函数被执行。这个过程中实现通信。
目前第三方由很多库是可以实现这个功能的，比如 pubsub

2. 使用步骤

1. 安装第三方库：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)去取消订阅。

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>