コンポーネント間のデータの受渡し

コンポーネントは独立しているとはいえ、時には互いに情報をやり取りする必要があります。特に頻繁に行われるのが 親子コンポーネント間でのデータの受け渡し です。

親から子へ: props としてデータを渡す

データフロー: 親 -> 子

+---------------------+
|  親 コンポーネント     |
|  (ParentComponent)  |
+---------------------+
           |
           | データ渡し (props)
           v
+---------------------+
|  子 コンポーネント     |
|  (ChildComponent)   |
+---------------------+

処理の流れ

親コンポーネントから子コンポーネントへデータを渡すには props (プロップス) というものを使います。props は、子コンポーネントが親から受け取るデータの「窓口」のようなものです。

1. 子コンポーネントでの記述: defineProps() を使って、親から受け取る props を定義します。
   

   <template>
     <p>{{ message }}</p>
     <p>年齢: {{ userAge }}</p>
   </template>
   
   <script setup>
   import { defineProps } from 'vue'
   
   // 受け取る props を定義
   defineProps({
     message: String, // 'message' という名前で文字列を受け取る
     userAge: {       // オブジェクト形式でより詳細に定義
       type: Number,  // 型は数値
       required: true // 必須プロパティ
     }
   })
   </script>
   

   [ 解説 ]

   • defineProps() は、<script setup> 構文で props を定義するためのマクロです。
   • type で期待するデータの型を指定できます。
   • required: true で、その props が必須であることを示せます。

2. 親コンポーネントでの記述: 子コンポーネントを呼び出す際に、HTML 属性のようにデータを渡します。
   

   <template>
     <ChildComponent :message="greetingMessage" :user-age="userAge" />
   </template>
   
   <script setup>
   import ChildComponent from './ChildComponent.vue'
   import { ref } from 'vue'
   
   const greetingMessage = ref('こんにちは、子コンポーネント !')
   const userAge = ref(30)
   </script>
   

   [ 解説 ]

   • :messageのようにコロン (v-bind の略記) を付けることで、 JavaScript の変数をバインドできます。

子コンポーネント内で props として受け取ったデータは、普通の変数のように扱えます。スクリプト内およびテンプレート内で使用できます。