1.1「親コンポーネント（クラス形式）」

【変換前】親コンポーネント（クラス形式 / 子コンポーネントへpropsとemit使用）

ParentComponent.vue

<template>
  <!--子コンポーネントにカウント値を渡し、イベントを受け取る-->
  <ChildComponent :count="count" @increment="incrementCount" />
</template>

<script lang="ts">
// Vue, Component, Propなどをインポート
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>

【ポイント】このコードで使われている仕組み

機能	内容
props	`:count="count"` で親 → 子にデータ渡し
emit	`@increment="incrementCount"` で子 → 親へ通知
Vuex	まだ使用していない (第3章以降で登場)
クラスコンポーネント	`@Component`デコレーターでclassをVue拡張
data	`count: number = 0;` で状態を管理

【次】1.2 子コンポーネント（クラス形式 / prop, emit使用）

この親はまだ store を使っていない「最小構成」ですが、まず prop と emit の仕組みを理解するために必要です。

このあと、次の 1.2 でこの親が使っている 子コンポーネント側（クラス形式） のコードを続けて解説します。

続けて 1.2 いきますか？