Vue组件之间传递数据（组件通信）----消息的定订阅与发布

vue组件之间经常需要传递数据，有时常常使用全局事件总线，但是消息的订阅与发布其实也是比较好用的。

简介：

类似于全局事件总线，作用是实现任意组件之间的通信。

类似于订阅报纸，在订阅的时候写上自己的地址。送的时候会将报纸送到写的地址那里，则自己就会收到报纸。

实现：需要在一个组件内订阅一个消息，即想要接受的数据定义的函数。在需要发送的组件内写发布消息的数据（定义与发布需要定义同名的消息变量）。当组件发布数据的时候要接收的组件就会自动触发对应函数。

理解：

1. 这种方式的思想与全局事件总线很相似。

2. 它包含以下操作:

(1) 订阅消息 --对应绑定事件监听

(2) 发布消息 --分发事件

(3) 取消消息订阅 --解绑事件监听

3. 需要引入一个消息订阅与发布的第三方实现库: PubSubJS

使用 PubSubJS ：

1. 在线文档: https://github.com/mroderick/PubSubJS

2. 下载: npm install -i pubsub-js

3. 相关语法

(1)import PubSub from 'pubsub-js' 引入

(2) PubSub.subscribe(‘msgName’, functon(msgName, data){ }) 消息的订阅

(3) PubSub.publish(‘msgName’, data): 发布消息, 触发订阅的回调函数调用

(4) PubSub.unsubscribe(token): 取消消息的订阅

示例：

有两个组件分别是School和Student，可以不用考虑组件之间的关系，可采用如下方法进行数据传递。

1. School组件（订阅消息用—接收数据）

<template>
  <div>
    <h2>学校名字：{{ name }}</h2>
    <h2>校长：{{ headerName }}</h2>
  </div>
</template>

<script>
// 1. 引入
import PubSub from "pubsub-js";
export default {
  name: "School",
  data() {
    return {
      name: "山东大学",
      headerName: "wangw",
      studentData: null,
      pubId: null,
    };
  },
  // 2.创建组件实例时订阅消息
  mounted() {
    //2.1 订阅名为‘getStudentData’的消息，第二个参数是回调函数
    this.pubId = PubSub.subscribe("getStudentData", (msgName, data) => {
      this.studentData = data;
    });
    // 2.2订阅的不同写法
    // this.pubId = PubSub.subscribe("getStudentData", this.getStudentData());
  },
  beforeDestroy() {
    // 销毁订阅
    PubSub.unsubscribe(this.pubId);
  },
  methods: {
    getStudentData(msgName, data) {
      this.studentData = data;
    },
  },
};
</script>

<style>
.demo {
  background-color: red;
}
</style>

2. Student组件（发布消息用----发送数据）

<template>
  <div>
    <h2>学校名字：{{ name }}</h2>
    <h2>校长：{{ myAge }}</h2>
    <Student :name="张三" :age="18" :sex="男"></Student>
  </div>
</template>

<script>
 // 1. 引入
import PubSub from "pubsub-js";
export default {
  name: "School",
  data() {
    return {
      myName: this.name,
      myAge: this.age,
      studentData: {},
    };
  },
  methods: {
    sendDataToSchool() {
      // 2. 消息发布
      PubSub.publish("getStudentData", this.studentData);
    },
  },
};
</script>

注意：

1. 订阅的回调函数可以写成箭头函数，也可以传递组件mothods的函数，建议不要用其它写法。（其它的函数使用this时this不是组件实例对象）
2. 订阅消息的销毁：订阅消息后会返回一个订阅ID，将ID可以保存到组件data中，销毁时通过ID进行销毁。
3. 接收数据时，注意函数第一个参数是订阅的名字，第二个参数才是发送过来的数据。

总结：

比起全局事件总线，消息的订阅与发布看起来理解较为容易些，只是它需要使用第三方库，需要引入，但是使用起来比较方便。不过由于全局事件总线是vue本身就提供的，所以建议还是多使用全局事件总线。

注意函数第一个参数是订阅的名字，第二个参数才是发送过来的数据。

总结：

比起全局事件总线，消息的订阅与发布看起来理解较为容易些，只是它需要使用第三方库，需要引入，但是使用起来比较方便。不过由于全局事件总线是vue本身就提供的，所以建议还是多使用全局事件总线。