Vue.jsのコンポーネント間のデータ受け渡し【props, $emit, provide/injectの使い方】

Vue.jsはコンポーネントベースのフレームワークで、コンポーネント間のデータの受け渡しは重要な機能です。

この記事では、Vue.jsでよく使用されるコンポーネント間のデータの受け渡し方法について、主に「props」「$emit」そして「provide/inject」という方法をご紹介します。

親子コンポーネント間の通信（propsと$emit）
provide/injectによるデータの共有
まとめ

親子コンポーネント間の通信（propsと$emit）

Vue.jsで最も基本的なデータ通信は、親コンポーネントと子コンポーネント間の通信です。

ここでは、propsを使って親から子へデータを渡し、$emitで子から親へデータを送信する方法を説明します。

propsによるデータの受け渡し

まず、親コンポーネントから子コンポーネントにデータを渡す際には、propsを利用します。

親コンポーネントがデータを渡し、子コンポーネントがそのデータを受け取る流れです。

親コンポーネント

<template>
  <div>
    <child-component :message="parentMessage" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

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

親コンポーネントでは、data()でparentMessageというデータを定義しています。

このデータを子コンポーネントに渡すために、子コンポーネントのタグ<child-component>に:message="parentMessage"というpropsバインディングを行います。

messageは親コンポーネントが子コンポーネントにデータを渡すための受け渡し口の名前であり、parentMessageは親コンポーネントのデータであることを示すデータプロパティです。

子コンポーネント

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

<script>
export default {
  props: ['message'],
};
</script>

子コンポーネントでは、propsオプションを使ってmessageを受け取り、それを表示します。

ここでは、親コンポーネントから渡されたparentMessageがmessageとして子コンポーネントに反映されます。

これにより、子コンポーネントは親コンポーネントからのデータを利用できるようになります。

$emitによる子から親へのデータ送信

次に、子コンポーネントから親コンポーネントにデータを送るために、$emitメソッドを使用します。

これにより、親子間の双方向のデータ通信ができるようになります。

子コンポーネント

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

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message-sent', 'Hello from child!');
    },
  },
};
</script>

子コンポーネントでは、sendMessageメソッドを定義しています。

このメソッドはボタンがクリックされたときに実行され、this.$emit('message-sent', 'Hello from child!')が実行されます。

$emitの第１引数message-sentはイベント名、第２引数の'Hello from child!'はイベントとともに親コンポーネントに送信されるデータ（メッセージ）です。

これによって、カスタムイベント'message-sent'というイベントとHello from child!というメッセージが子コンポーネントから親コンポーネントに送られます。

親コンポーネント

<template>
  <div>
    <child-component @message-sent="handleMessage" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  methods: {
    handleMessage(message) {
      console.log(message); // 出力: Hello from child!
    },
  },
};
</script>

親コンポーネントでは、handleMessageメソッドを定義します。

子コンポーネントから送られたカスタムイベント'message-sent'に対応する@message-sentディレクティブを使用してイベントをリッスンし、子コンポーネントから送られたメッセージを受け取っています。

そして、同時にhandleMessageメソッドが呼び出されます。

messageには子コンポーネントから送信された$emitメソッドの第２引数'Hello from child!'が渡され、console.log(message)でコンソールに出力されます。

これにより、カスタムイベントを使って親コンポーネントでは子コンポーネントからのデータを利用できます。

provide/injectによるデータの共有

Vue.jsのprovide/injectは、親から子、そして孫コンポーネントにまでデータを直接渡せる仕組みです。

これにより、中間コンポーネントを介さずにデータを共有できるので、構造が深い場合に便利です。

provideで親からデータを共有

親コンポーネントでprovideオプションを使い、子孫コンポーネントにデータを共有します。

親コンポーネント

<template>
  <div>
    <child-component />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  provide() {
    return {
      sharedMessage: 'Hello from parent!',
    };
  },
};
</script>

親コンポーネントでは、provideオプションを使用してsharedMessageというデータを提供しています。

このsharedMessageは子や孫コンポーネントに渡すことができます。

今回は、孫コンポーネントに渡していきます。

injectでデータを受け取る

孫コンポーネントでinjectオプションを使い、親コンポーネントから提供されたデータを受け取ります。

子コンポーネント

<template>
  <div>
    <grandchild-component />
  </div>
</template>

<script>
import GrandchildComponent from './GrandchildComponent.vue';

export default {
  components: {
    GrandchildComponent,
  },
};
</script>

孫コンポーネント

<template>
  <div>
    <p>{{ sharedMessage }}</p>
  </div>
</template>

<script>
export default {
  inject: ['sharedMessage'],
};
</script>

injectを使うことで、親コンポーネントのデータsharedMessageを孫コンポーネントで受け取ることができます。

子コンポーネントには、データの受け渡しの記載は不要です。孫コンポーネントの定義をしています。

このように、provide/injectを利用すれば、中間の子コンポーネントを経由せずにデータを渡すことができるため、コンポーネント階層が深い場合に便利です。

まとめ

このブログでは、Vue.jsにおけるコンポーネント間の通信に焦点を当て、「propsと$emit」および「provide/inject」の2つの通信パターンについて解説しました。

これらの通信パターンはVue.jsの基本的な機能なので、理解しておくとよりフレキシブルにフロントエンドアプリケーション開発をすることができます。

ぜひご自身の環境でも実践してみてください！

Vue.jsの基本セットアップ、データバインディング、ルーティングについて知りたい方は、こちらもご覧ください！