当前位置：首页 > news >正文

组件通信-v-model

news 来源：原创 2025/5/3 6:03:51

概述：实现 父↔子 之间相互通信。
前序知识 —— 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