概述：实现 父↔子 之间相互通信。
前序知识 ——
v-model的本质
<!-- 使用v-model指令 -->
<input type="text" v-model="userName">
<!-- v-model的本质是下面这行代码 -->
<input
type="text"
:value="userName"
@input="userName =(<HTMLInputElement>$event.target).value"
> 3.（父组件）组件标签上的v-model的本质：:moldeValue ＋ update:modelValue事件。
<script setup lang="ts">
import { ref } from 'vue'
import AtInput from './AtInput.vue'
const username = ref('zhangsan')
</script>
<template>
<div class="father">
<h1>父组件</h1>
<!-- 第一种写法 -->
<AtInput v-model="username" />
<!-- 第二种写法 -->
<!-- <AtInput :modelValue="username" @update:modelValue="username = $event" /> -->
</div>
</template>(子组件) AtInput组件中：
<script setup lang="ts">
// 接收props
defineProps(['modelValue'])
// 声明事件
const emit= defineEmits(['update:modelValue'])
</script>
<template>
<div class="input">
<input type="text"
:value="modelValue"
@input="emit('update:modelValue',(<HTMLInputElement>$event.target).value)"
>
</div>
</template>4.也可以更换value，例如改成ming
<!-- 也可以更换value，例如改成abc-->
<AtInputv-model:ming="userName"/>
<!-- 上面代码的本质如下 -->
<AtInput:ming="userName" @update:ming="userName = $event"/>AtInput组件中
<template>
<input
type="text"
:value="ming"
@input="emit('update:abc',$event.target.value)"
>
</template>
<script setup lang="ts" name="AtInput">
// 接收props
defineProps(['ming'])
// 声明事件
const emit = defineEmits(['update:ming'])
</script>5.如果value可以更换，那么就可以在组件标签上多次使用v-model
<AtInput v-model:ming="userName" v-model:mima="password"/>