Father.vue
<template>
<div>
<!-- v-model用在html上 -->
<!-- <input type="text" v-model="userName"> -->
<!-- 实际原理 -->
<!-- <input type="text" :value="userName" @input="userName = (<HTMLInputElement>$event.target).value"> -->
<!-- v-model用在组件上 -->
<Myinput v-model="userName"/>
<Myinput :modelValue="userName" @update:modelValue="userName = $event"/>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import Myinput from './MyInput.vue'
const userName = ref('父组件')
</script>
<style scoped>
</style>
MyInput.vue
<template>
<div>
<input type="text" :value="modelValue" @input="emit('update:modelValue', (<HTMLInputElement>$event.target).value)">
</div>
</template>
<script setup lang="ts">
defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
</script>
<style scoped>
</style>