📡 3.5 コンポーネント間のデータ受け渡し（props / emits / event bus）

✅ 【要点】

Vue でコンポーネント間のやり取りをする時は大きく3パターン：

  1. props → 親 → 子 へのデータ渡し
  2. emits ($emit) → 子 → 親 へのイベント通知
  3. event bus → 兄弟や遠く離れたコンポーネントとの通信（非推奨だが Vue2 でたまに見る）

→ 「どこからどこへ渡すか」で使い分けるのが大事

→ 設計の方向性を間違えるとバグの原因になるので超重要なポイント！

🟢 1. props → 親から子へデータを渡す

🌱 【基本例】

<!-- Parent.vue -->
<template>
  <ChildComponent :message="parentMessage" />
</template>

<script lang="ts">
import ChildComponent from './ChildComponent.vue';

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


<!-- ChildComponent.vue -->
<template>
  <p>{{ message }}</p>
</template>

<script lang="ts" setup>
const props = defineProps<{ message: string }>();
</script>
誰が渡す？ どこへ？ どう書く？
親 子コンポーネント <ChildComponent :message="..." />
子 受け取る defineProps<{ message: string }>()

✅ 一方通行（親 → 子）だからわかりやすい。

🟠 2. $emit → 子から親へイベントで知らせる

🌼 【基本例】

<!-- Parent.vue -->
<template>
  <ChildComponent @submit="handleSubmit" />
</template>

<script lang="ts">
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  methods: {
    handleSubmit(data: string) {
      console.log('Received from child:', data);
    },
  },
};
</script>