vue消息订阅与发布

消息订阅与发布
  也可以实现任意组件间的通信

  1.订阅消息：设置消息名 --》需要数据的组件进行订阅消息
  2.发布消息：传递消息内容 --》传递数据的组件进行发布消息

  npm i pubsub-js --> 消息订阅与发布所需库

  使用步骤
    1.npm i pubsub-js -S
    2.在需要使用消息订阅与发布的地方使用
      订阅消息的组件（接收数据的组件）
        import pubsub from "pubsub-js"
        mounted(){
          const 唯一id=pubsub.subscribe("消息名",(【自定义参数名称，数据】)=>{
            //回调函数：回调函数执行时机：是在发布消息后，进行自动回调
          })
          this.唯一id=唯一id
        },
        beforeDestory(){
          <!-- 组件销毁之前，取消订阅 根据id进行销毁 -->
          pubsub.unsubscribe(this.唯一id)
        }

      发布消息的组件（传递数据的组件）
        import pubsub from "pubsub-js"
        methods:{
          xxxClick(){
            <!-- 只要触发publish，就会回调subscribe中的回调函数 -->
            pubsub.publish("消息名",【数据】)
          }
        }

订阅消息组件（即需要外部数据的组件）

<template>
  <div>
    <h2>兄弟组件的名称:{{ name }}</h2>
  </div>
</template>

<script>
import pubsub from "pubsub-js";
export default {
  data() {
    return {
      name: "",
      pubid: "",
    };
  },
  mounted() {
    // 订阅消息,回调函数要写成箭头函数，否则this指向会出问题
    this.pubid = pubsub.subscribe("getName", (msgName, data) => {
      console.log(this);
      console.log(data);
      this.name = data;
    });
  },
  beforeDestroy() {
    pubsub.unsubscribe(this.pubid);
  },
};
</script>

<style>
</style>

发布消息组件（传递数据的组件）

<template>
  <div>
    <h2>兄弟组件的名称:{{ name }}</h2>
    <button @click="sendName">点击获取兄弟组件的name</button>
  </div>
</template>

<script>
import pubsub from "pubsub-js";
export default {
  data() {
    return {
      name: "page2",
    };
  },
  methods: {
    sendName() {
      // 发布消息
      pubsub.publish("getName", this.name);
    },
  },
};
</script>

<style>
</style>