组件v-model和自定义v-model修饰符（vModelText）

<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>