ホームページ > 記事 > ウェブフロントエンド > 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」という名前のプロップを渡すことができます。
<template> <div> <child :message="msg"></child> </div> </template> <script> import Child from "./Child.vue"; export default { name: "Parent", components: { Child }, data() { return { msg: "Hello World!" }; } }; </script>
子コンポーネントでは、渡された props 値を受け取り、それをテンプレートで使用できます。
<template> <div> {{ message }} </div> </template> <script> export default { name: "Child", props: { message: { type: String, required: true } } }; </script>
この例では、「msg」は親コンポーネントで定義され、「message」は props の名前です。これは親コンポーネントの値と一致する必要があります。子コンポーネントは、「props」オプションを使用して、props のデータ型と渡す必要がある値を定義する必要があります。
これは、小道具を通過するデータの基本的な例です。渡す必要がある props が複数ある場合は、それらをオブジェクトに入れて子コンポーネントに渡すことができます。
$emit
$emit は、Vue で広く使用されているもう 1 つのコンポーネント通信メソッドです。 $emit を使用してカスタム イベントをトリガーし、データを親コンポーネントに渡すことができます。 props とは異なり、$emit は双方向のデータ転送を実現できるため、Vue アプリケーションのコンポーネント間のリソース共有がより便利になります。
props とは異なり、$emit は子コンポーネントから親コンポーネントにデータを渡すことができます。以下に例を示します。
この例では、カスタム イベント名「greeting」を定義し、ボタンがクリックされたときにイベントを起動します。選択したアイテムもイベントに渡します。
<template> <div> <button @click="sayHi()">Click me</button> </div> </template> <script> export default { name: "Child", methods: { sayHi() { this.$emit("greeting", { message: "Hello World!" }); } } }; </script>
親コンポーネントでは、子コンポーネントのカスタム イベントをリッスンし、イベントの発生時に渡されたデータを使用できます。
<template> <div> <child @greeting="handleGreeting"></child> <div>{{ greeting }}</div> </div> </template> <script> import Child from "./Child.vue"; export default { name: "Parent", components: { Child }, data() { return { greeting: "" }; }, methods: { handleGreeting(data) { this.greeting = data.message; } } }; </script>
この例では、「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 つのボタンが設定されています。 「挨拶」ボタンをクリックすると、ストア内の「挨拶」属性の値が表示されます。 「挨拶の変更」ボタンは、コミット関数を通じてミューテーション属性で定義した関数を呼び出すことにより、ストア内の「挨拶」の値を変更します。
<template> <div> <div>{{ greeting }}</div> <button @click="getGreeting">greeting</button> <button @click="changeGreeting">change greeting</button> </div> </template> <script> import { mapGetters, mapMutations } from "vuex"; export default { name: "Child", computed: { ...mapGetters(["getGreeting"]) }, methods: { ...mapMutations(["changeGreeting"]), getGreeting() { alert(this.getGreeting); } } }; </script>
この例では、「mapGetters」と「mapMutations」を使用して、ストア内のデータと関数をコンポーネントの計算されたプロパティとメソッドにマップできます。このメソッドでは、alert を使用してストア内の「greeting」属性の値を表示します。 「挨拶の変更」ボタンをクリックすると、changeGreeting 関数が呼び出され、ストアの「挨拶」属性が変更されます。
概要
上記は、Vue2.x でコンポーネント通信を実装する 3 つのメソッド、props、$emit、Vuex です。実際の開発では、さまざまなニーズやシナリオに基づいて使用する通信方法を選択できます。
props を介して、コンポーネント間のデータ フローを確実に明確にするために、一方向のデータ送信を実現できます。$emit は、コンポーネント間の双方向のデータ送信を実行できるため、コンポーネント間のリソースがVue アプリケーションの共有がより便利になり、Vuex を使用するとパブリック データをストアに保存できるため、コンポーネント間の通信がより簡単かつ効率的になります。
以上がVue2.x でコンポーネント通信を実装するための完全なガイド (props、$emit、Vuex)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。