Vue学习（十六）消息订阅与发布（pubsub-js）

消息的订阅与发布（pubsub-js）

一种组件间的通信方式，适用于任意组件间的通信(使用pubsub-js插件)

安装pubsub-js

使用如下命令进行安装

npm i pubsub-js
# 或
yarn add  pubsub-js

引入

在发布消息（提供数据）的组件和订阅消息（获取数据）的组件中引入pubsub-js：import pubsub from 'pubsub-js'

订阅消息

数据的使用者（接收数据）组件中进行订阅消息。
A组件想要接收数据，则在A组件中订阅消息，订阅消息的回调放在A组件本身。

...
methods: {
   
    demo(message, data) {
   
        ...
    }
},
...
mounted() {
   
    // 定于消息
    // this.pubId = pubsub.subscribe("消息名", 回调函数)
    this.pubId = pubsub.subscribe("消息名", this.demo)

},
beforeDestroy() {
   
    // 取消订阅
    pubsub.unsubscribe(this.pubId);
},

发布消息

数据的提供者（提供数据）的组件中进行发布消息。
B组件需要提供数据，就在B组件需要提供数据的时候发布消息 pubsub,publish("message", data)

注意

最好在beforeDestroy钩子中使用pubsub.unsubscribe(this.pubId);取消消息订阅

School组件（订阅消息）

<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: "北京·昌平"
            }
        },
        methods: {
   
          demo(messageName, data) {
   
            console.log("有人发布了hello消息，消息订阅的回调执行了", messageName, data);
          }
        },
        mounted() {
   
          // 绑定自定义事件
          /* this.$bus.$on("hello", (data) => {
            console.log("我是School组件，收到了数据", data)
          }) */
          this.pubId = pubsub.subscribe("hello", this.demo)
        },
        beforeDestroy() {
   
          // 解绑事件
          // this.$bus.$off("hello");
          pubsub.unsubscribe(this.pubId);
        },
    }
</script>

<style scoped>
  .school {
   
    background-color: skyblue;
    padding