Vueコンポーネント通信方法事例まとめ

Vueコンポーネント通信方法事例まとめ

1. 親コンポーネントが子コンポーネントに値を渡す(props)

ステップ:

  1. 親コンポーネントのv-bindを介して子コンポーネントにデータを渡す
  2. 親コンポーネントから子コンポーネントのpropsを通じて渡されたデータを受け取る
<div id="アプリ">
	<!-- 1. v-bind を通じて子コンポーネントにデータを渡す -->
    <テスト v-bind:ss='名前'></テスト>
</div>

<スクリプト>
    var a = 新しい Vue({
        el:'#app',
        データ:{
            名前:'bing',
        },
        コンポーネント:
            テスト:{
                props: ['ss'], // 2. 親コンポーネントから渡されたデータを受け取る template: "<p>{{ss}}</p>"
            }
        }
    })
</スクリプト>

Props は親要素と子要素間の單向數據流を作成します。親要素が更新されると、子要素の状態もそれに応じて変化します。
しかし、その逆の場合、アプリケーションのデータフローが理解しにくくなり、親コンポーネントのデータを子コンポーネントで変更できなくなります

2. サブコンポーネントは親コンポーネントに値を渡す($emit)

子コンポーネントは$emitイベントを通じて親コンポーネントにメッセージを送信し、独自のデータを親コンポーネントに渡します。

ステップ:

  1. clickイベントを子コンポーネントにバインドして、 incrementメソッドをトリガーします。
  2. incrementメソッドでは、 $emitを使用してカスタムイベントのincrementを定義し、 this.counterパラメータを渡します。
  3. ステップ2のカスタムincrementイベントを親コンポーネントにバインドします。メソッド名はincrementTotalです。
  4. 親コンポーネントのステップ 3 でincrementTotalメソッドを呼び出します。すると、 incrementTotalメソッドは子コンポーネントから渡されたパラメータを受け取ることができます。
<div id="アプリ">
    <p>{{ 合計 }}</p>
    <button-counter v-on:increment="incrementTotal"></button-counter> <!-- ステップ 3 -->
</div>

<スクリプト>
    Vue.component('ボタンカウンター', {
        テンプレート: '<button v-on:click="increment">{{ counter }}</button>', // ステップ 1
        データ: 関数 () {
            戻る {
                カウンター: 'サブコンポーネントデータ'
            } 
        },
        メソッド: {
            増分: 関数 () {
                this.$emit('increment', this.counter); // ステップ2
            }
        }
    });


    新しいVue({
        el: '#app',
        データ: {
            合計: '親コンポーネントデータ:'
        },
        メソッド: {
            incrementTotal: function (e) { // ステップ4
                this.total = this.total + e[0]
                コンソールログ(e);
            }
        }
    })
</スクリプト>

3. ブラザーコンポーネント値伝送(EventBus)

コンポーネント間のデータ通信を処理するために Vuex のようなライブラリが必要ない場合は、Vue のEventBus を使用して通信することを検討できます。

Vue では、すべてのコンポーネントが同じイベント センターを共有するのと同じように、 EventBus通信ブリッジとして使用し、センターからイベントを送受信するように登録できるため、コンポーネントは他のコンポーネントに並行して通知できます。
しかし、便利すぎるため、不用意に使用すると、メンテナンスが困難な「災害」を引き起こす可能性があります。そのため、通知の概念を共有状態レベルに引き上げるための状態管理センターとして、より完全な Vuex が必要です。

この方法は、$emit イベントの処理センター (イベント バス) として空の vue インスタンスを作成し、それを介してイベントをトリガーおよびリッスンし、親子、兄弟、世代間コンポーネントを含む任意のコンポーネント間の通信を簡単に実現します。詳細は以下の通りです。

1. 初期化(new Vue())

まず、イベント バスを作成してエクスポートし、他のモジュールがそれを使用したりリッスンしたりできるようにする必要があります。
これには2つの方法で対処できます。

方法1:新しいevent-bus.jsファイルを作成する

// イベントバス.js
'vue' から Vue をインポートします
エクスポート const EventBus = new Vue()

方法2:プロジェクトのmain.jsでEventBusを直接初期化する

// メイン.js
Vue.prototype.$EventBus = new Vue() // 注意: この方法で初期化されたEventBusはグローバルイベントバスです

これでEventBusが作成されたので、それをコンポーネントにロードし、親コンポーネントと子コンポーネント間でメッセージを渡すときと同じメソッドを呼び出すだけです。

2. イベントの送信 ($emit())

通信する必要がある 2 つの Vue ページ (A と B) があるとします。ページ A では、クリック イベントがボタンにバインドされ、ページ B に通知するメッセージが送信されます。

<!-- A.vue -->
<テンプレート>
    <button @click="sendMsg()">-</button>
</テンプレート>

<スクリプト> 
「../event-bus.js」から EventBus をインポートします。
エクスポートデフォルト{
  メソッド: {
    送信メッセージ() {
      EventBus.$emit("aMsg", 'ページ A からのメッセージ'); // データを外部に送信する}
  }
}; 
</スクリプト>

3. イベントを受信する ($on())

次に、ページ B でこのメッセージを受信する必要があります。

<!-- B.vue -->
<テンプレート>
	<p>{{メッセージ}}</p>
</テンプレート>

<スクリプト> 
「../event-bus.js」から EventBus をインポートします。
エクスポートデフォルト{
	データ() {
		戻る {
			メッセージ: ''
		}
	},
	マウント() {
		EventBus.$on("aMsg", (msg) => { // A から送信されたメッセージを受信します this.msg = msg;
		});
	}
};
</スクリプト>

4. イベントリスナーを削除する

前述のように、不適切に使用すると、EventBus は大惨事になる可能性があります。どのような「大惨事」なのでしょうか?誰もが知っているように、vue はシングルページ アプリケーションです。ページを更新すると、関連する EventBus が削除され、ビジネスが停止します。また、業務に繰り返し操作するページがある場合、監視時に何度も EventBus が起動されることになり、これも非常に大きな隠れた危険性となります。このとき、EventBusとプロジェクトの関係を適切に処理する必要があります。これは通常、vue ページが破棄されたときに EventBus イベント リスナーを削除するために使用されます。

イベント リスナーを削除する場合は、次のようにします。

「../event-bus.js」から EventBus をインポートします。
イベントバス.$off('aMsg', {})

EventBus.$off('aMsg')アプリケーション内のこのイベントのすべてのリスナーを削除します。
または、 EventBus.$off()を直接呼び出して、パラメータを追加せずにすべてのイベント チャネルを削除することもできます。

4. ヴュークス

複数人での共同開発やログイン状態のグローバルな維持管理が必要な中規模から大規模のシングルページアプリケーションを作成する場合は、状態管理に vuex を選択するのが最適です。

Vuex詳細説明ポータル

Vueコンポーネントの通信方法の事例まとめの記事はこれで終わりです。より関連性の高いVueコンポーネントの通信方法まとめについては、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。皆様、今後とも123WORDPRESS.COMをよろしくお願いいたします!

以下もご興味があるかもしれません:
  • Vue3の7つのコンポーネント通信方式の詳細説明
  • 親子コンポーネントの通信を解決するための3つのVueスロット
  • Vue3における7種類のコンポーネント通信の詳細
  • Vue がコンポーネント通信を実装する 8 つの例
  • Vue におけるコンポーネント通信の詳細説明 (父子コンポーネント、祖父孫コンポーネント、兄弟コンポーネント)
  • Vueコンポーネント間の通信方法はいくつかある

<<:  MySQLパーティションテーブルの詳細な説明

>>:  Apache Bench ストレステストツールの実装原理と使用状況分析

推薦する

Nest.js 認証検証方法の例

目次0x0 はじめに0x1 RBAC 実装0x2 クレームベースの承認0x3 統合 CASL 0x4...

HTML の POST リクエストにおける a タグの 2 つの使用法の分析

HTML POST リクエストで a タグを使用する 2 つの例を次に示します。 1. ajaxを使...

JavaScript によるデータ視覚化: ECharts マップの作成

目次概要予防1. 使用方法2. 実装手順予備実装コード効果: Geo共通設定上記の構成を追加した後の...

WeChatアプレットキャンバスが署名機能を実装

WeChatアプレットプロジェクトでは、開発モジュールに手書き署名機能が含まれ、WeChatアプレッ...

シンプルなアコーディオン効果を実現するjs

この記事では、アコーディオン効果を実現するためのjsの具体的なコードを参考までに共有します。具体的な...

MySQL インストール プロンプト「詳細なヘルプについては NET HELPMSG 3534 と入力してください」の解決方法

今日、MySQL をインストールすると次のエラー メッセージが表示されます。 かなり長い時間ネットで...

Linux システムの仮想ホストで Swoole Loader 拡張機能を有効にする方法

特記事項: Swoole 拡張機能のみがインストールされ、サーバーはホストにインストールされません。...

スクロールバーを非表示にする HTML の簡単な実装

1. 属性付きHTMLタグXML/HTML コードコンテンツをクリップボードにコピー< htm...

MySQL マルチマスターと 1 スレーブのデータバックアップ方法のチュートリアル

概要いずれかのデータベースに対する操作は他のデータベースに自動的に適用され、2 つのデータベースのデ...

CSS3 のボックス サイズ設定 (コンテンツ ボックスとボーダー ボックス) の詳細な説明

CSS3 のボックス サイズ設定 (content-box と border-box) CSS3 の...

Python ベースの Linux システムにおける特定のプロセスのパフォーマンス監視の考え方の詳細な説明

インターネット上には Linux サーバーを監視するためのツール、コンポーネント、プログラムが多数あ...

JSON.stringify の簡易版の実装とその 6 つの主要機能の詳細な説明

目次序文JSON.stringify の 6 つの機能特集1特集2特集3特集4特集5特集6手動で文字...

Linux スケジュールタスクの関連操作の概要

皆様の参考と操作を容易にするために、様々な主要ウェブサイトを検索し、関連するスケジュールされたタスク...

Ubuntu 16.04 で MySQL マスター スレーブ同期を設定する方法

準備1. マスターとスレーブのデータベースのバージョンは一致している必要があります2. マスターデー...

小さな三角形の実装コードを含む CSS ナビゲーション バー メニュー

多くの Web ページにはナビゲーション バーに小さな三角形があり、この機能を実装するのは実は非常に...