了解です！

では 第2章 2.1「子コンポーネントのprops定義をdefinePropsに書き換える」 に入ります。

ここでは、まず 変換前（クラス形式）と変換後（Composition API / <script setup>）のコードを比較 します。

第2章 2.1 子コンポーネントのprops定義をdefinePropsに書き換える

【変換前】クラスコンポーネントでのprops定義

ChildComponent.vue (before)

<template>
  <!-- ボタンをクリックするとincrementメソッドが発火 -->
  <button @click="increment">Increment</button>
  <!-- 親から受け取ったcountを表示 -->
  <p>Count from parent: {{ count }}</p>
</template>

<script lang="ts">
// Vue, Component, Prop, Emitをインポート
import Vue from 'vue';
import Component from 'vue-class-component';
import { Prop, Emit } from 'vue-property-decorator';

@Component
// 子コンポーネントのクラス定義
export default class ChildComponent extends Vue {
  // 親から渡されるカウント値をpropsで受け取る
  @Prop({ type: Number, required: true })
  count!: number;

  // ボタンがクリックされたらincrementイベントをemitする
  @Emit('increment')
  increment() {
    // emitするだけなので中身は空
  }
}
</script>

【変換後】Composition API (<script setup>) でのprops定義

ChildComponent.vue (after)

<template>
  <!-- ボタンをクリックするとincrement関数が発火 -->
  <button @click="increment">Increment</button>
  <!-- 親から受け取ったcountを表示 -->
  <p>Count from parent: {{ count }}</p>
</template>

<script lang="ts" setup>
// propsの型を定義
interface Props {
  count: number;
}

// propsをdefinePropsで受け取る
const props = defineProps<Props>();

// emitsの型を定義
const emit = defineEmits<{
  (event: 'increment'): void;
}>();

// incrementイベントをemitする関数
function increment() {
  emit('increment');
}
</script>

【ポイント比較】変換前 / 変換後

【なぜこうするのか？】

• Composition APIでは @Prop / @Emit が使えない
• defineProps / defineEmits にすることで型推論が効く