Vue2基础篇-30-消息订阅与发布（pubsub）

1. 简介

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

2. 使用步骤：

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

2. demo

2.1 推送数据

<template>
  <div>
    <h2>学生名称为{{ StudentName }}</h2>
    <h2>学生地址为{{ StudentAddress }}</h2>
  </div>
</template>

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

export default {
  name: "Student",
  data() {
    return {
      StudentName: "张三",
      StudentAddress: "金桥",
    };
  },
  methods: {
    getShoolName(msgName, value) {
      console.log(value);
    },
  },
  mounted() {
    // const pubId = publish.subscribe("schoolName", function (msgName, data) {
    //   //如果这样写,这里的this是undefine
    //   console.log("学校的名称为", data);
    // });

    // const pubId = publish.subscribe("schoolName", (msgName, data) => {
    //   //如果这样写,这里的this是vc
    //   console.log("学校的名称为", data);
    // });

    //一般是这样写
    const pubId = publish.subscribe("schoolName", this.getShoolName);
  },
  beforeDestroy() {
    //如果不需要订阅了，取消订阅如下
    publish.unsubScribe(this.pubId);
  },
};
</script>

<style></style>

2.2 接收数据

<template>
  <div>
    <h2>学校名称为{{ SchoolName }}</h2>
    <h2>学校地址为{{ SchoolAddress }}</h2>
    <button @click="sendSchoolNameToStudent">将学校名称交给学生组件</button>
  </div>
</template>

<script>
import publish from "pubsub-js";
export default {
  name: "School",
  data() {
    return {
      SchoolName: "叮咚大学",
      SchoolAddress: "张江",
    };
  },
  methods: {
    sendSchoolNameToStudent() {
      publish.publish("schoolName", this.SchoolName);
    },
  },
};
</script>

<style></style>