vue3组件间通信-v-model
父组件：

<template><div class="father"><h3>父组件</h3><!-- <h4>{{ username }}</h4><h4>{{ password }}</h4> --><!-- v-model用在html标签上 --><!-- <input type="text" v-model="username"> <br><input type="text" :value="username" @input="username=(<HTMLInputElement>$event.target).value"> --><!-- v-model用在组件标签上 --><AtguiguInput v-model="username"/><!-- 对于原生事件，$event就是事件对象，能$event.target.value对于自定义事件，$event就是触发事件时所传递的数据，不能$event.target.value，只能$event--> <!-- <AtguiguInput :modelValue="username" @update:modelValue="username = $event"/> --><!-- 修改modelValue --><!-- <AtguiguInput v-model:ming="username" v-model:mima="password"/> --></div>
</template>
<script setup lang="ts" name="Father">import { ref } from "vue";import AtguiguInput from './AtguiguInput.vue'// // 数据let username = ref('zhansgan')let password = ref('123456')
</script>
<style scoped>
.father {padding: 20px;background-color: rgb(165, 164, 164);border-radius: 10px;
}
</style>

子组件：

<template><input type="text" :value="modelValue"@input="emit('update:modelValue',(<HTMLInputElement>$event.target).value)"><br><!-- 对于原生事件，$event就是事件对象，能$event.target.value对于自定义事件，$event就是触发事件时所传递的数据，不能$event.target.value，只能$event--> <input type="text" :value="mima"@input="emit('update:mima',(<HTMLInputElement>$event.target).value)">
</template>
<script setup lang="ts" name="AtguiguInput">defineProps(['modelValue','mima'])const emit = defineEmits(['update:modelValue','update:mima'])
</script><style scoped>input {border: 2px solid black;background-image: linear-gradient(45deg,red,yellow,green);height: 30px;font-size: 20px;color: white;}
</style>