vue3での v-model , modelValue

カスタムコンポーネントにおけるv-modelは、modelValueプロパティを渡してupdate:modelValueイベントを発火させるのと等価です。
<Child v-model="text"/>
<!-- ↑ ↓  これらは全く同じです -->
<Child :modelValue="text" @update:modelValue="text = $event"/>

引用: https://tekrog.com/v-model-in-vue3/#Vue3-2

Child.vue はこのように記述します

Child.vue

<template>
  <input :value="modelValue" type="text" @input="onInputText" />
</template>

<script lang="ts" setup>
const props = defineProps<{modelValue: string}>()
const emits = defineEmits<{(e: 'update:modelValue', text: string): void}>()

const onInputText = (e: Event) => {
  const target = e.target as HTMLInputElement
  emits('update:modelValue', target.value)
}
</script>
TypeScript

No.2265
12/16 17:50

edit