Vue でのメッセージのサブスクリプションとパブリッシュの使用法を簡単に分析した記事

メッセージのサブスクリプションと公開とは何ですか?使い方？次の記事では、Vue でメッセージのサブスクリプションとパブリッシュを使用する方法を紹介します。

1. メッセージのサブスクリプションと公開とは何ですか

メッセージのサブスクリプションと公開は、コンポーネント間の通信方法であり、通信に適しています。任意のコンポーネント間。コンポーネント間のコミュニケーションをより適切に実現できます (メッセージの購読と発行は新聞配達員に似ています。たとえば、Xiao 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 でメッセージをサブスクライブすると、サブスクライブされたコールバックがコンポーネントに残ります。それ自体。

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

まず、データを受信したいコンポーネントを見つけ、マウントされた構成アイテムを構成し、メッセージをサブスクライブする必要があります。subscribeこの単語は、サブスクライブするという意味もあります。次のコンポーネントは Little A の役割です。彼は新聞を購読したいと考えており、アドレス 'hello', を残し、コールバックを使用してデータを取得します。ここでの msgName とデータは、それぞれ購読名とデータ (つまり、Xiao 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' はサブスクリプション名で、2 番目のパラメーター (this.name) は渡すデータです。

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

• beforeDestroy フックでサブスクライブを解除するのが最善です。

#

  beforeDestroy() {pubsub.unsubscribe();}

#3.nextTick##1. 構文: this.$nextTick (コールバック関数)

2. 機能: $nextTick に配置されたオペレーションはすぐに実行されるのではなく、データが更新され DOM の更新が完了した後に実行されます

3. 使用タイミング: データが変更されたとき新しい DOM で特定の操作が実行される場合、それらの操作は nextTick で指定されたコールバック関数で実行される必要があります。

(学習ビデオ共有:

vuejs 入門チュートリアル

、基本プログラミング ビデオ )

以上がVue でのメッセージのサブスクリプションとパブリッシュの使用法を簡単に分析した記事の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。