一文浅析vue中消息订阅与发布的使用方法

时间：2023-01-31 20:38

什么是消息订阅与发布？怎么使用？下面本篇文章给大家介绍一下vue中消息订阅与发布的使用方法，希望对大家有所帮助！

1.什么是消息订阅与发布

消息订阅与发布是一种组件间通信的方式，适用于任意组件间通信。能更好的实现组件间通信（消息订阅与发布就像是送报员一样。好比小a向报社订阅了一份报纸，然后在报社留下了自己的信息，然后送报员就按着小a留下的信息找到了小a所在的地方将报纸送给了他）

2.如何使用pubsub

1.首先我们要安装pubsub,打开vscode→打开终端→输入一下安装命令（也可以在cmd进行安装）【相关推荐：vuejs视频教程、web前端开发】

npm i pubsub-js

2.引入（在需要使用pubsub的组件内引入即可）

import pubsub from ' pubsub-js'

3.接收数据A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。

methods(){demo(data){.....}mounted() {this.pid = pubsub. subscribe( 'xx'，this . demo) }

我们应该先找到想要接受数据的组件，配置一个mounted的配置项，进行消息的订阅subscribe这个单词也有订阅的意思，也就是下面这个组件就是小a的角色，他要订阅一份报纸，然后留下了自己的住址'hello',再利用回调获取数据，这里的msgName，data分别是订阅名和数据（也就是小a的家庭住址和送报员所携带的报纸）

import pubsub from "pubsub-js";
export default {
  name: "School",
  data() {
    return {
      name: "山鱼特效屋",
      address: "南京北城区"
    };
  },
  mounted() {
    this.pubId = pubsub.subscribe("hello", (msgName, data) => {
      console.log("该消息已经发布", msgName, data);
    });
  },
  //使用完之后销毁该绑定事件避免后期错误使用
  beforeDestroy() {
    pubsub.unsubscribe();
  }
};

提供数据

pubsub. publish( ' xxx' ,数据)

publish方法的第一个参数'hello'为订阅名，第二个参（this.name）为想要传递的数据。

import pubsub from "pubsub-js";
export default {
  name: "Student",
  data() {
    return {
      name: "张三",
      sex: "男"
    };
  },
  // 配置一个methods项
  methods: {
    snedStudentName() {
      // 选择给谁提供数据
      pubsub.publish("hello", this.name);
    }
  }
};