vue中的消息订阅与发布

一.用处：用于组件之间数据的传递

1.弊端：需要依赖第三方库，本文采用pubsub-js库

1.1安装pubsub-js第三方库：在集成终端中运行 npm i pubsub-js

1.2：  PublisherComponent.vue的代码

<template>
  <div>
    <button @click="pubTitle">发布消息</button>
  </div>
</template>

<script>
// 发送发:发布
import pubsub from "pubsub-js";
export default {
  name: "PublisherComponent",
  methods: {
    pubTitle() {
      //发布
      pubsub.publish("title", "今天又多学了一点");
    },
  },
};
</script>

<style>
</style>

主要点:pubsub.publish("title", "今天又多学了一点");发布语法

1.3：SubscriberComponent.vue代码

<template>
  <div></div>
</template>

<script>
//接收方:订阅
import pubsub from "pubsub-js";
export default {
  name: "SubscriberComponent",
  mounted: function () {
    /*
        pubsub.subscribe('数据题目', (messageName, message) =>{}返回的是当前订阅对象的id。
        subscribe 方法用于订阅一个特定的消息，当有消息发布时，会调用一个回调函数。
        messageName：消息的题目
        message：消息的具体数据（内容）
        **/
    this.pid = pubsub.subscribe("title", (messageName, message) => {
      console.log("消息的名字：", messageName);
      console.log("消息的具体内容：", message);
    });
  },
  // 在vue实例销毁前，一定要取消消息的订阅
  beforeDestroy: function () {
    pubsub.unsubscribe(this.pid);
  },
};
</script>

<style>
</style>

主要点: 

       pubsub.subscribe('数据题目', (messageName, message) =>{}返回的是当前订阅对象的id。

        subscribe 方法用于订阅一个特定的消息，当有消息发布时，会调用一个回调函数。

        messageName：消息的题目

        message：消息的具体数据（内容）

        在vue实例销毁前，一定要取消消息的订阅

注意点 ：his.pid = pubsub.subscribe("title", (messageName, message) =>{}在这里一定要使用箭头函数，这样this本身指代的才是Vue实例，如果是普通函数，这里的this就是undefined