Ein Artikel, der kurz die Verwendung des Nachrichtenabonnements und der Veröffentlichung in Vue analysiert

Was ist das Abonnieren und Veröffentlichen von Nachrichten? Wie benutzt man? Im folgenden Artikel erfahren Sie, wie Sie das Abonnieren und Veröffentlichen von Nachrichten in Vue nutzen. Ich hoffe, dass er Ihnen weiterhilft!

1. Was ist das Abonnieren und Veröffentlichen von Nachrichten? Das Abonnieren und Veröffentlichen von Nachrichten ist eine Methode der Kommunikation zwischen Komponenten und eignet sich für jede Kommunikation zwischen Komponenten. Kann die Kommunikation zwischen Komponenten (Nachrichtenabonnement und Veröffentlichung) besser realisieren, ist wie ein Zeitungsausträger. Zum Beispiel abonniert der kleine A eine Zeitung und hinterlässt dann seine eigenen Informationen im Zeitungsbüro, und dann drückt der Zeitungsausträger die von ihm hinterlassenen Informationen a fand den Ort, an dem der kleine a war, und gab ihm die Zeitung in cmd installiert) [Verwandte Empfehlungen: vuejs-Video-Tutorial

,

Web-Front-End-Entwicklung

]

npm i pubsub-js

2. Einführung (führen Sie es einfach in die Komponente ein, die Pubsub verwenden muss)

import pubsub from ' pubsub-js'

3. Daten empfangen Eine Komponente möchte Um Daten zu empfangen, abonnieren Sie die Nachricht in der A-Komponente, und der Abonnementrückruf verbleibt in der A-Komponente selbst.

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

Wir sollten zuerst die Komponente finden, die Daten empfangen möchte, ein bereitgestelltes Konfigurationselement konfigurieren und die Nachricht abonnierenabonnieren

Dieses Wort bedeutet auch abonnieren, das heißt, die folgende Komponente ist die Rolle von Little A , er möchte eine Zeitung abonnieren und dann Ihre Adresse hinterlassen

'Hallo',

und dann den Rückruf verwenden, um die Daten zu erhalten. Der msgName und die Daten sind hier der Abonnementname bzw. die Daten (dh die Heimatadresse von). Kleines A und das vom Zeitungszusteller getragene) Zeitung)

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

Daten bereitstellen

pubsub. publish( ' xxx' ,数据)

Der erste Parameter „Hallo“ der Veröffentlichungsmethode ist der Abonnementname und der zweite Parameter (this. Name) sind die Daten, die Sie übergeben möchten.

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

• Am besten im beforeDestroy-Hook abmelden.

  beforeDestroy() {pubsub.unsubscribe();}

3.nextTick

• 1. $nextTick (Callback-Funktion)

2. Die in $nextTick platzierte Operation wird nicht sofort ausgeführt, sondern wartet auf die Daten Wird nach Abschluss der DOM-Aktualisierung ausgeführt

3. Wenn die Daten geändert werden und bestimmte Vorgänge basierend auf dem aktualisierten neuen DOM ausgeführt werden sollen, müssen diese in der von nextTick angegebenen Rückruffunktion ausgeführt werden. (Teilen von Lernvideos: Vuejs-Einführungs-Tutorial

,

Grundlegendes Programmiervideo

)

Das obige ist der detaillierte Inhalt vonEin Artikel, der kurz die Verwendung des Nachrichtenabonnements und der Veröffentlichung in Vue analysiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!