✅ 7.1 PropsとEmitの再設計（v-modelの移行対応）

■ 要点まとめ

• Class APIの時

  @Prop と @Emit('input') デコレータを使って、v-modelを実装していた。

• Composition APIでは

  defineProps と defineEmits を組み合わせて、より明示的に管理する。

• v-modelの内部挙動も少し変わる

  • value → modelValue
  • inputイベント → update:modelValueイベント へ変更が必要。

■ Before（クラスコンポーネント版）

// ファイル名: ChildComponent.vue
<script lang="ts">
import { Vue, Component, Prop, Emit } from 'vue-property-decorator';

@Component
export default class ChildComponent extends Vue {
  // 親から渡されるv-modelの値
  @Prop({ type: String, default: '' }) private value!: string;

  // 入力イベントを親に伝える
  @Emit('input')
  onInput(event: Event) {
    return (event.target as HTMLInputElement).value;
  }
}
</script>

<template>
  <input :value="value" @input="onInput" />
</template>

■ After（Composition API版）

// ファイル名: ChildComponent.vue
<script setup lang="ts">
// 親から渡されるv-modelの値（Composition APIではmodelValue）
const props = defineProps<{
  modelValue: string;
}>();

// 親に通知するイベント（update:modelValueイベントを発火）
const emit = defineEmits<{
  (e: 'update:modelValue', value: string): void;
}>();

// inputイベントハンドラー
function onInput(event: Event) {
  emit('update:modelValue', (event.target as HTMLInputElement).value);
}
</script>

<template>
  <input :value="props.modelValue" @input="onInput" />
</template>

✅ 再設計まとめ

🎯 設計時の注意ポイント

• v-modelは必ず modelValue と update:modelValue に統一する。
• 型定義 (defineProps, defineEmits) を 明示的に型安全 に行うこと。
• 親コンポーネント側も、v-modelのバインディング名に注意する。