Vue 消息订阅与发布

使用

1、首先安装 pubsubjs，执行 npm i pubsub-js
pubsubjs 一个利用 JavaScript 进行发布/订阅的库
pubsubjs 一种组件间通信的方式，适用于任意组件间通信

2、由于是 School 需要接收订阅消息，所以在 School 中先引入 pubsubjs，然后订阅和取消订阅消息

<template>
  <!--组件的结构-->
  <div class="school">
    <h2>学校名称：{{ name }}</h2>
    <h2>学校地址：{{ address }}</h2>
    <span>传过来的消息：{{ msg }}</span>
  </div>
</template>

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

//组件交互相关的代码（数据、方法等）
export default {
  name: "SchoolD",
  data() {
    return {
      name: "北京大学",
      address: "北京",
      msg: "",
    };
  },
  mounted() {
    this.pubid = pubsub.subscribe("hello", (msgName, data) => {
      this.msg = data;
      console.log(
        "有人发布了hello消息，" + msgName + "回调执行了，收到数据：" + data
      );
    });
  },
  beforeDestroy() {
    pubsub.unsubscribe(this.pubid);
  },
  methods: {
    // hello(msgName, data) {
    //   //两个参数 第一个是方法名 第二个是传过来的数据
    //   this.msg = data;
    //   console.log(
    //     "有人发布了hello消息，" + msgName + "回调执行了，收到数据：" + data
    //   );
    // },
  },
};
</script>

需要注意，订阅消息时，回调函数写成箭头函数，或者放到 methods 中，否则方法中的 this 是 undefined
3、Student 中引入 pubsubjs，并发布消息

<template>
  <!--组件的结构-->
  <div class="student">
    <h2>学生姓名：{{ name }}</h2>
    <h2>学生年龄：{{ age }}</h2>
    <button @click="sendStudentName">向School组件发送学生姓名</button>
  </div>
</template>

<script>
import pubsub from "pubsub-js";
//组件交互相关的代码（数据、方法等）
export default {
  name: "StudentD",
  data() {
    return {
      name: "张三",
      age: 18,
    };
  },
  methods: {
    sendStudentName() {
      pubsub.publish("hello", 666);
    },
  },
};
</script>

总结

消息订阅与发布(pubsub)
1.一种组件间通信的方式，适用于任意组件间通信
2.使用步骤:
①安装pubsub: npm i pubsub-js
②引入:import pubsub from ‘pubsub-js’
3.接收数据：
A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身

methods(){
	demo(data){......}
}
......
mounted() {
    this.pubid = pubsub.subscribe("xxx", this.demo)
  }

4.提供数据：pubsub.publish( "xxx” ,数据)
5.最好在beforeDestroy钩子中，用PubSub.unsubscribe(pid)去取消订阅