父组件
<script setup>
const txt = ref('');
</script>
<template>
<CustomInput v-model="txt" />
</template>
子组件
defineProps defineEmits
<CustomInput> 组件内部需要做两件事：
将内部原生 <input> 元素的 value attribute 绑定到 modelValue prop
当原生的 input 事件触发时，触发一个携带了新值的 update:modelValue 自定义事件
<script setup>
const props = defineProps({
'modelValue': String,
})
const emit = defineEmits(["update:modelValue"])
</script>
<template>
<input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
</template>
另一种在组件内实现 v-model 的方式是使用一个可写的，同时具有 getter 和 setter 的 computed 属性
computed 绑定
使用computed 属性时， get 方法需返回 modelValue prop，而 set 方法需触发相应的事件
子组件
<script setup>
const value = computed({
get() {
return props.modelValue
},
set(value) {
emit("update:modelValue", value)
}
})
</script>
<template>
<input v-model="value" />
</template>
v-model 绑定多个属性
父组件
<template>
<CustomInput v-model:first-name="first" v-model:last-name="last" />
</template>
子组件
<script setup>
const props = defineProps({
firstName: String,
lastName: String,
})
// 在computed中 使用
const emit = defineEmits(['update:firstName', 'update:lastName'])
</script>
<template>
<input
type="text"
:value="firstName"
@input="$emit('update:firstName', $event.target.value)"
/>
<input
type="text"
:value="lastName"
@input="$emit('update:lastName', $event.target.value)"
/>
</template>
参考：