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 サイトの他の関連記事を参照してください。