Un article analysant brièvement l'utilisation de l'abonnement aux messages et la publication dans Vue

Qu'est-ce que l'abonnement et la publication de messages ? Comment utiliser ? L'article suivant vous présentera comment utiliser l'abonnement et la publication de messages dans Vue. J'espère qu'il vous sera utile !

1. Qu'est-ce que l'abonnement et la publication de messages

L'abonnement et la publication de messages sont une méthode de communication inter-composants et conviennent à toute communication inter-composants. Peut mieux réaliser la communication entre les composants (l'abonnement et la publication des messages sont comme un livreur de journaux. Par exemple, Little A s'abonne à un journal puis laisse ses propres informations dans le bureau du journal, puis le livreur de journaux appuie sur les informations laissées par a trouvé l'endroit où se trouvait le petit a et lui a donné le journal)

2. Comment utiliser pubsub

1 Nous devons d'abord installer pubsub, ouvrir vscode → ouvrir le terminal → entrer la commande d'installation (peut également être. installé dans cmd) [Recommandations associées : tutoriel vidéo vuejs, développement web front-end]

npm i pubsub-js

2 Introduction (il suffit de l'introduire dans le composant qui doit utiliser pubsub)

import pubsub from ' pubsub-js'

3. veut recevoir des données, s'abonner au message dans le composant A, et le rappel d'abonnement reste dans le composant A lui-même.

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

Nous devons d'abord trouver le composant qui souhaite recevoir des données, configurer un élément de configuration monté et nous abonner au messages'abonnerCe mot signifie également s'abonner, c'est-à-dire que le composant suivant est le rôle d'un petit , il veut Abonnez-vous à un journal, puis laissez votre adresse 'bonjour', puis utilisez le rappel pour obtenir les données. Le msgName et les données ici sont respectivement le nom et les données de l'abonnement (c'est-à-dire l'adresse du domicile de. Petit A et celui porté par le livreur du journal) Journal)

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();
  }
};

• Fournir des données

pubsub. publish( ' xxx' ,数据)

Le premier paramètre 'hello' de la méthode de publication est le nom de l'abonnement, et le deuxième paramètre (this. name) sont les données que vous souhaitez transmettre.

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

• Il est préférable de se désinscrire dans le hook beforeDestroy.

  beforeDestroy() {pubsub.unsubscribe();}

3.nextTick

1. Syntaxe : this $nextTick (fonction de rappel)

2 Fonction : L'opération placée dans $nextTick ne sera pas exécutée immédiatement, mais attendra les données. à mettre à jour. Exécuter une fois la mise à jour du DOM terminée

3. Moment d'utilisation : lorsque les données sont modifiées et que certaines opérations doivent être effectuées en fonction du nouveau DOM mis à jour, elles doivent être exécutées dans la fonction de rappel spécifiée par nextTick.

(Partage de vidéos d'apprentissage : Tutoriel d'introduction à vuejs, Vidéo de programmation de base)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!