✅ 7.3 Before/Afterコード例：v-modelを使った親子間同期

（クラスコンポーネント版 → Composition API版への書き換え）

■ 要点まとめ

• *クラスコンポーネント版（Before）**は、@Prop('value')＋@Emit('input')
• *Composition API版（After）**では、modelValueとupdate:modelValueを明示的に使う
• <script setup lang="ts">形式＋TypeScript型付き

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

ParentComponent.vue

// ファイル名: ParentComponent.vue
<template>
  <ChildComponent v-model="childValue" />
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import ChildComponent from './ChildComponent.vue';

@Component({
  components: { ChildComponent },
})
export default class ParentComponent extends Vue {
  // 子コンポーネントに渡す値
  private childValue: string = '親から渡す初期値';
}
</script>

ChildComponent.vue

// ファイル名: ChildComponent.vue
<template>
  <input :value="value" @input="onInput" />
</template>

<script lang="ts">
import { Vue, Component, Prop, Emit } from 'vue-property-decorator';

@Component
export default class ChildComponent extends Vue {
  // 親から受け取った値
  @Prop({ type: String, default: '' }) private value!: string;

  // 入力されたら親へイベント送信
  @Emit('input')
  onInput(event: Event) {
    return (event.target as HTMLInputElement).value;
  }
}
</script>

■ After（Composition API版）

ParentComponent.vue

// ファイル名: ParentComponent.vue
<template>
  <ChildComponent v-model="childValue" />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

// 子に渡すデータをrefで定義
const childValue = ref<string>('親から渡す初期値');
</script>

ChildComponent.vue

// ファイル名: ChildComponent.vue
<template>
  <input :value="modelValue" @input="onInput" />
</template>

<script setup lang="ts">
// 親から受け取るプロパティを定義
const props = defineProps<{
  modelValue: string;
}>();

// 親に送るイベントを定義
const emit = defineEmits<{
  (e: 'update:modelValue', value: string): void;
}>();

// 入力イベント時にemitで親へ通知
function onInput(event: Event) {
  emit('update:modelValue', (event.target as HTMLInputElement).value);
}
</script>