了解しました！

ここでは 第6章：コンポーネント入門 の中でも重要な

props（親から子へのデータ渡し） と emit（子から親へのイベント通知）

の仕組みを、実際のコードと一行ずつの解説つきで丁寧に説明します。

✅ 要点まとめ

概念 役割 方向
props 親 → 子にデータを渡す ダウン（下向き）
emit 子 → 親にイベントを通知する アップ（上向き）

🎯 目標

親コンポーネントから子に「名前」を渡し、

子コンポーネントで「ボタンを押したら名前を報告」して、

親で「受け取って表示」する例を作ります。

📄 ファイル構成

src/
├── components/
│   └── HelloButton.vue ← 子コンポーネント
├── App.vue             ← 親コンポーネント

📄 ファイル名：components/HelloButton.vue（子コンポーネント）

<template>
  <!-- 名前を表示しつつ、ボタンで親に通知 -->
  <button @click="notifyParent">{{ name }} さんを選択</button>
</template>

<script lang="ts" setup>
// defineProps で親から受け取る name を定義
const props = defineProps<{
  name: string;
}>();

// defineEmits で emit イベントを定義
const emit = defineEmits<{
  (e: 'selected', name: string): void;
}>();

// ボタンクリック時に selected イベントを emit（親へ通知）
const notifyParent = () => {
  emit('selected', props.name);
};
</script>

<style scoped>
button {
  background-color: lightblue;
  border: none;
  padding: 0.5rem 1rem;
  cursor: pointer;
}
</style>

🧩 一行ずつの解説（子）