<script setup>
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script>
<template>
<input :value="modelValue" @input="$emit('update:modelValue',$event.target.value)" />
</template>
<CustomInput v-model="searchText">
默认情况下,v-mode都是使用modelValue作为prop,并以update:modelValue作为对应的事件。可以通过给v-model指定一个参数来更改这些名字。
<MyComponent v-model:title="bookTitle" />
<!-- MyComponent.vue -->
<script setup>
defineProps(['title'])
defineEmits(['update:title'])
</script>
<template>
<input
type="text"
:value="title"
@input="$emit('update:title', $event.target.value)"
/>
</template>
也可以绑定多个v-model值
<MyCom v-model:first-name="first"></Mycom>
<MyCom v-model:last-name="last"></Mycom>
<!-- MyCom -->
<script setup>
defineProps({
firstName:String,
lastName:String
})
defineEmits(['update:firstName', 'update:lastName'])
</script>
<template>
<input
type="text"
:value="firstName"
@input="$emit('update:firstName', $event.target.value)"
/>
<input
type="text"
:value="lastName"
@input="$emit('update:lastName', $event.target.value)"
/>
</template>
处理v-model修饰符
<MyCom v-model.capitalize="mytext"></MyCom>
<script>
const props = defineProps({
modelValue:String,
modelModifiers:{default: ()=> ({}) }
})
defineEmits(['update:modelValue'])
function emitValue(e) {
let value = e.target.value
if (props.modelModifiers.capitalize) {
value = value.charAt(0).toUpperCase() + value.slice(1)
}
emit('update:modelValue', value)
}
</script>
<template>
<input type="text" :value="modelValue" @input="emitValue" />
</template>
如果不使用组件,直接给一个原生元素绑定自定义修饰符的v-model,可以用vModelText
<script setup>
// 导入 ref 和 vModelText 函数
import { ref, vModelText } from 'vue';
// 定义一个响应式变量 value
const value = ref('');
// 使用 vModelText.beforeUpdate 指令,在更新 value 之前对输入值进行操作
vModelText.beforeUpdate = (el, binding) => {
// 如果输入值不为空且包含 capitalize 修饰符,则将输入值的首字母转换为大写
if (el.value && binding.modifiers.capitalize) {
el.value = el.value.charAt(0).toUpperCase() + el.value.slice(1);
}
};
</script>
<template>
<input type="text" v-model.capitalize="value" />
</template>