Vue.jsでのコンポーネント間通信: Props、Events、Vuexの使い分け

作成日 2025.02.13
Vue.js
Vue.js

Vue.jsのコンポーネント間通信は、複数の方法で実現できます。親子間での通信から、グローバルな状態管理まで、目的に応じた手法を使い分けることが重要です。本記事では、Props、Events、Vuexをそれぞれのシナリオに合わせて使う方法を解説します。

1. コンポーネント間通信とは
2. Propsを使った親から子へのデータ伝達
3. 子から親へのデータ伝達: Eventsの使用
4. Eventsのリスニング: 親での受け取り
5. Vuexを使ったグローバル状態管理
6. Vuexでのデータの取得
7. Vuexでのデータの更新
8. Vuexを使うべきシナリオ
9. Props vs Events vs Vuex: 使い分け
10. Propsの利点と制限
11. Eventsの利点と制限
12. Vuexの利点と制限
13. 状態管理を効率化する方法
14. まとめ

コンポーネント間通信とは

コンポーネント間通信は、Vue.jsのコンポーネントが互いにデータやメッセージをやり取りする方法です。これにより、アプリケーション内のデータフローを管理できます。

Propsを使った親から子へのデータ伝達

Propsは、親コンポーネントから子コンポーネントにデータを渡すための基本的な方法です。

<template>
  <ChildComponent :message="parentMessage" />
</template>

<script>
export default {
  data() {
    return {
      parentMessage: 'Hello from Parent!',
    };
  },
};
</script>

子から親へのデータ伝達: Eventsの使用

子コンポーネントから親コンポーネントにデータを送信する場合、カスタムイベントを使用します。

<template>
  <button @click="sendMessage">Send Message</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('messageSent', 'Message from Child');
    },
  },
};
</script>

Eventsのリスニング: 親での受け取り

親コンポーネントでは、子コンポーネントから発信されたイベントを受け取ります。

<template>
  <ChildComponent @messageSent="handleMessage" />
</template>

<script>
export default {
  methods: {
    handleMessage(message) {
      console.log('Received message:', message);
    },
  },
};
</script>

Vuexを使ったグローバル状態管理

Vuexは、複数のコンポーネント間で共通の状態を管理するために使用されます。Vuexストアを使うことで、アプリケーション全体で一貫性のある状態を保つことができます。

import { createStore } from 'vuex';

const store = createStore({
  state: {
    message: 'Hello from Vuex',
  },
  mutations: {
    updateMessage(state, newMessage) {
      state.message = newMessage;
    },
  },
});

export default store;

Vuexでのデータの取得

コンポーネントからVuexストアのデータにアクセスする方法です。

<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  computed: {
    message() {
      return this.$store.state.message;
    },
  },
};
</script>

Vuexでのデータの更新

Vuexストア内のデータを更新する方法です。Mutationを使って状態を変更します。

<template>
  <button @click="updateMessage">Change Message</button>
</template>

<script>
export default {
  methods: {
    updateMessage() {
      this.$store.commit('updateMessage', 'Updated message');
    },
  },
};
</script>