Vue コンポーネント間 データ受渡し: 子 -> 親

子から親へ: emitでイベントを通知する

子コンポーネントから親コンポーネントへデータを送り返したり、何らかの操作を親に伝えたりするには、 イベントを発行 (emit) します。子コンポーネントから「こういうことがあったよ !」と親に知らせるイメージです。

データフロー: 子 -> 親

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

処理の流れ

1. 子コンポーネントでの記述: defineEmits() で発行するイベントを定義し、emit 関数でイベントを発行します。

   <template>
     <button @click="sendDataToParent">親へデータを送る</button>
   </template>
   
   <script setup>
   import { defineEmits } from 'vue'
   
   // 'child-data-sent' という名前のイベントを定義
   const emit = defineEmits(['child-data-sent'])
   
   const sendDataToParent = () => {
     // 'child-data-sent' イベントを発行し、データを一緒に渡す
     emit('child-data-sent', '子コンポーネントからのメッセージです !')
   }
   </script>
   

   • defineEmits() は <script setup> 構文でイベントを定義するためのマクロです。 (defineProps() と同様)
   • emit 関数の第 1 引数にイベント名、第 2 引数以降に渡したいデータを指定します。

2. 親コンポーネントでの記述: 子コンポーネントのタグ上で、@ (v-on の略記) を使ってイベントを監視し、イベント発生時に実行するメソッドを定義します。

   <template>
     <ChildComponent @child-data-sent="handleChildData" />
     <p v-if="receivedMessage">子から受け取ったメッセージ: {{ receivedMessage }}</p>
   </template>
   
   <script setup>
   import ChildComponent from './ChildComponent.vue'
   import { ref } from 'vue'
   
   const receivedMessage = ref('')
   
   const handleChildData = (data) => {
     receivedMessage.value = data
   
     console.log('親コンポーネントでイベントを受け取りました:', data)
   }
   </script>
   

   • @child-data-sent のように、イベント名を @ の後に記述します。
   • イベントハンドラーのメソッドの引数には、子から送られたデータが自動的に渡されます。

props と emit は、コンポーネント指向開発における基本的なデータ連携のパターンです。これらを使いこなすことで、整理されたコンポーネント構造を保ちながら、複雑な UI を実現できます。