1. 概述：實現 父?子 之間相互通信。

2. 前序知識 —— 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">// 接收propsdefineProps(['ming'])// 聲明事件const emit = defineEmits(['update:ming'])
</script>

5.如果value可以更換，那么就可以在組件標簽上多次使用v-model

<AtInput v-model:ming="userName" v-model:mima="password"/>