了解です！

ではそのまま進めていきます。

■ 第2章 2.3 親コンポーネント側のemit呼び出しを修正する

ここでは、子コンポーネントから送られてくる emit を Composition API で受け取る方法 を説明します。

まずは変換前（クラス）と変換後（Composition API）を比較します。

● 【変換前】クラスコンポーネントでのemit受け取り

<template>
  <!-- 子コンポーネントからincrementイベントを受け取る -->
  <ChildComponent :count="count" @increment="incrementCount" />
</template>

<script lang="ts">
// Vue, Componentをインポート
import Vue from 'vue';
import Component from 'vue-class-component';
// 子コンポーネントをインポート
import ChildComponent from './ChildComponent.vue';

@Component({
  components: {
    ChildComponent,
  },
})
// 親コンポーネントのクラス定義
export default class ParentComponent extends Vue {
  // カウントの初期値をdataとして持つ
  count: number = 0;

  // 子からemitされたときにカウントを1増やすメソッド
  incrementCount() {
    this.count += 1;
  }
}
</script>

● 【変換後】Composition APIでのemit受け取り

<template>
  <!-- 子コンポーネントからincrementイベントを受け取る -->
  <ChildComponent :count="count" @increment="incrementCount" />
</template>

<script lang="ts" setup>
// reactiveで状態(count)を定義
import { reactive } from 'vue';
// 子コンポーネントをインポート
import ChildComponent from './ChildComponent.vue';

// カウントの状態をリアクティブに管理
const state = reactive({
  count: 0,
});

// 子からemitされたときにカウントを1増やす関数
function incrementCount() {
  state.count += 1;
}
</script>

✔ 【ポイント】変換前 / 変換後の違い

クラス時代 Composition API
data: count: number = 0; reactive({ count: 0 })
メソッドでthis.count += 1 関数で state.count += 1
子の@increment="incrementCount" 書き方そのものは変わらない
this の使用が必要 this が不要 → シンプルでエラー減少

🎯 【なぜこうするのか？】