Vue3中v-model用法及示例详解

2025/6/1 23:38:25 来源：https://blog.csdn.net/BillKu/article/details/147264069 浏览: 次关键词：Vue3中v-model用法及示例详解

在 Vue 3 中，v-model 是用于实现双向数据绑定的指令，但在语法和功能上相比 Vue 2 有显著改进。以下是详细用法及示例：

一、基础用法：表单元素

在原生表单元素上，v-model 直接绑定数据：

vue

<template><input v-model="message" /><p>输入的内容是：{{ message }}</p>
</template><script setup>
import { ref } from 'vue';
const message = ref('');
</script>

二、自定义组件中的 v-model

在自定义组件中，v-model 默认绑定 modelValue 属性和 update:modelValue 事件：

父组件

vue

<template><ChildComponent v-model="parentValue" />
</template><script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
const parentValue = ref('默认值');
</script>

子组件（ChildComponent.vue）

vue

<template><input:value="modelValue"@input="$emit('update:modelValue', $event.target.value)"/>
</template><script setup>
defineProps(['modelValue']);
defineEmits(['update:modelValue']);
</script>

三、多个 v-model 绑定

Vue 3 允许在同一组件上绑定多个 v-model：

父组件

vue

<template><UserForm v-model:firstName="first" v-model:lastName="last" />
</template><script setup>
import { ref } from 'vue';
import UserForm from './UserForm.vue';
const first = ref('');
const last = ref('');
</script>

子组件（UserForm.vue）

vue

<template><input :value="firstName" @input="$emit('update:firstName', $event.target.value)" /><input :value="lastName" @input="$emit('update:lastName', $event.target.value)" />
</template><script setup>
defineProps(['firstName', 'lastName']);
defineEmits(['update:firstName', 'update:lastName']);
</script>

四、自定义修饰符

通过 modelModifiers 实现自定义修饰符：

父组件

vue

<template><CustomInput v-model.capitalize="text" />
</template><script setup>
import { ref } from 'vue';
import CustomInput from './CustomInput.vue';
const text = ref('');
</script>

子组件（CustomInput.vue）

vue

<template><input:value="modelValue"@input="emitValue($event.target.value)"/>
</template><script setup>
const props = defineProps({modelValue: String,modelModifiers: { default: () => ({}) }
});
const emit = defineEmits(['update:modelValue']);const emitValue = (value) => {if (props.modelModifiers.capitalize) {value = value.charAt(0).toUpperCase() + value.slice(1);}emit('update:modelValue', value);
};
</script>