消息订阅与发布（pubsub）

pubsubjs参考链接

1. 一种组件间通信的方式，适用于任意组件间通信。

2. 使用步骤：

   1. 安装 pubsub：npm install 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组件传递数据
      Student.vue组件

<template>
  <div>
    <button @click="sendStudentName">把名字传递给school组件</button>
  </div>
</template>

<script>
import pubsub from "pubsub-js";
export default {
  data() {
    return {
      name: "janny",
    };
  },

  methods: {
    sendStudentName() {
      pubsub.publish("hello", this.name);
    },
  },
};
</script>

School.vue组件

<template>
  <div>
    <h1>School组件</h1>
    <h2>{{ name }}</h2>
  </div>
</template>

<script>
import pubsub from "pubsub-js";

export default {
  name: "",
  data() {
    return {
      name: "小虾皮陈",
      age: 18,
      helloId: null,
    };
  },
  mounted() {
    this.helloId = pubsub.subscribe("hello", (a, b) => {
      //第一个参数表示订阅的是哪个函数,第二个参数才是真正接收的传递过来的数据
      //注意:这里回调函数要写成箭头函数的形式,否则里面的this就不确定了
      this.name = b;
      console.log("School组件收到数据了", a, b);
    });
  },
  beforeDestroy() {
    // 在组件销毁的时候取消订阅
    pubsub.unsubscribe(this.helloId);
  },
};
</script>