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

ChildComponent.vue

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

<script lang="ts">
// Vue, Component, Prop, Emit をインポート
import Vue from 'vue';
import Component from 'vue-class-component';
// @Propデコレーターをインポート
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() {
    // ここで何も返さなくてもOK（emitだけが目的）
  }
}
</script>

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

機能 内容
@Prop 親から渡されるcountを受け取る（必須 / number型）
@Emit('increment') incrementイベントを親へ送る
テンプレート @click="increment" でemit発火
クラスコンポーネント デコレーター（@Prop, @Emit）を利用
型 count!: number で型安全に受け取る

【ここまでのまとめ】親子コンポーネントの動き

  1. 親コンポーネントが count を渡す
  2. 子コンポーネントが @Prop で受け取る
  3. 子のボタンがクリックされる
  4. @Emit('increment') で親に通知
  5. 親の incrementCount() が呼ばれて count が +1 される

【次】1.3 Vuexストア（state / mutation / action）

次は、これに Vuexを組み合わせた場合のストアコード（変換前） を書きます。

続けて 1.3 いきますか？