Vue2.x でコンポーネント通信を実装するための完全なガイド (props、$emit、Vuex)

Vue2.x コンポーネント通信実装の完全ガイド (props、$emit、Vuex)

Vue は、最新の JavaScript フレームワークとして、Web アプリケーションの開発時に非常に人気があります。 Vue のコンポーネント化されたアーキテクチャにより、開発者はコードと機能を簡単に分離できると同時に、さまざまなコンポーネントを介した柔軟な通信が可能になります。

この記事では、Vue アプリケーションを構築するときにリソースをより適切に管理できるように、Vue2.x でのコンポーネント通信の 3 つの方法 (props、$emit、Vuex) について説明します。

Props

props は、Vue のコンポーネント パラメーター受け渡しメソッドの 1 つです。 props を使用して子コンポーネントに値を渡すことができます。子コンポーネントでは、props の値は読み取り専用です。つまり、変更できません。これにより、一方向のデータの流れが可能になり、Vue アプリケーションの保守とデバッグが容易になります。

これは例です:

親コンポーネントで、「parent」という名前のプロップを作成し、それに「message」という名前のプロップを渡すことができます。

子コンポーネントでは、渡された props 値を受け取り、それをテンプレートで使用できます。

この例では、「msg」は親コンポーネントで定義され、「message」は props の名前です。これは親コンポーネントの値と一致する必要があります。子コンポーネントは、「props」オプションを使用して、props のデータ型と渡す必要がある値を定義する必要があります。

これは、小道具を通過するデータの基本的な例です。渡す必要がある props が複数ある場合は、それらをオブジェクトに入れて子コンポーネントに渡すことができます。

$emit

$emit は、Vue で広く使用されているもう 1 つのコンポーネント通信メソッドです。 $emit を使用してカスタム イベントをトリガーし、データを親コンポーネントに渡すことができます。 props とは異なり、$emit は双方向のデータ転送を実現できるため、Vue アプリケーションのコンポーネント間のリソース共有がより便利になります。

props とは異なり、$emit は子コンポーネントから親コンポーネントにデータを渡すことができます。以下に例を示します。

この例では、カスタム イベント名「greeting」を定義し、ボタンがクリックされたときにイベントを起動します。選択したアイテムもイベントに渡します。

親コンポーネントでは、子コンポーネントのカスタム イベントをリッスンし、イベントの発生時に渡されたデータを使用できます。

この例では、「handleGreeting」がイベントの処理に使用されるメソッドです。このメソッドは、子コンポーネントによってトリガーされたカスタム イベントをパラメーターとして受け取ります。データ転送は、子コンポーネントの $emit イベントから取得できます。

Vuex

Vuex は、Vue.js アプリケーションの状態管理ライブラリです。これにより、コンポーネントが状態を共有できるようになり、コンポーネント間の通信がより簡単かつ効率的になります。

これは例です:

この例では、「store」という名前の Vuex ストアを作成してデータを共有します。 state 属性では、共有する必要があるデータを定義できます。 mutations 属性では、ストア内のデータを変更するための関数を定義できます。 getter 属性では、データを処理して共有値を返す関数を定義できます。

import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); export default new Vuex.Store({ state: { greeting: "Hello World!" }, mutations: { changeGreeting(state, payload) { state.greeting = payload.greeting; } }, getters: { getGreeting(state) { return state.greeting; } } });

ストア内のデータと関数は、どの Vue コンポーネントでも使用できます。この例では、2 つのボタンが設定されています。 「挨拶」ボタンをクリックすると、ストア内の「挨拶」属性の値が表示されます。 「挨拶の変更」ボタンは、コミット関数を通じてミューテーション属性で定義した関数を呼び出すことにより、ストア内の「挨拶」の値を変更します。

この例では、「mapGetters」と「mapMutations」を使用して、ストア内のデータと関数をコンポーネントの計算されたプロパティとメソッドにマップできます。このメソッドでは、alert を使用してストア内の「greeting」属性の値を表示します。 「挨拶の変更」ボタンをクリックすると、changeGreeting 関数が呼び出され、ストアの「挨拶」属性が変更されます。

概要

上記は、Vue2.x でコンポーネント通信を実装する 3 つのメソッド、props、$emit、Vuex です。実際の開発では、さまざまなニーズやシナリオに基づいて使用する通信方法を選択できます。

props を介して、コンポーネント間のデータ フローを確実に明確にするために、一方向のデータ送信を実現できます。$emit は、コンポーネント間の双方向のデータ送信を実行できるため、コンポーネント間のリソースがVue アプリケーションの共有がより便利になり、Vuex を使用するとパブリック データをストアに保存できるため、コンポーネント間の通信がより簡単かつ効率的になります。

以上がVue2.x でコンポーネント通信を実装するための完全なガイド (props、$emit、Vuex)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。