组件 v-model
首先让我们回忆一下v-model
在原生元素上的用法:
<inputv-model ="searchText" />
在代码背后,模板编译器会对v-model
进行更冗长的等价展开。因此上面的代码其实等价于下面这段:
<input:value ="searchText"@input ="searchText = $event.target.value" />
而当使用在一个组件上时,v-model
会被展开为如下的形式:
<CustomInput :modelValue="searchText" @update:modelValue="newValue => searchText = newValue" />
要让这个例子实际工作起来,<CustomInput>
组件内部需要做两件事:
- 将内部原生
<input>
元素的value
attribute 绑定到modelValue
prop - 当原生的
input
事件触发时,触发一个携带了新值的update:modelValue
自定义事件
<!-- CustomInput.vue --> <script setup> defineProps(['modelValue']) defineEmits(['update:modelValue ']) </script> <template> <input :value="modelValue" @input="$emit('update:modelValue ', $event.target.value)" /> </template>
现在v-model
可以在这个组件上正常工作了:
<CustomInput v-model="searchText" />
另一种在组件内实现v-model
的方式是使用一个可写的,同时具有getter和setter的computed
属性。get
方法需返回modelValue
prop,而set
方法需触发相应的事件:
<!-- CustomInput.vue --> <script setup> import { computed } from 'vue' const props = defineProps(['modelValue']) const emit = defineEmits(['update:modelValue ']) const value = computed({get() { return props.modelValue },set(value) { emit('update:modelValue ', value) } }) </script> <template> <input v-model="value" /> </template>
emit('update:modelValue',value)中参数value,数据类型是任意类型:字符串、数字、布尔值、以及数组、对象等。
v-model 的参数
默认情况下,v-model
在组件上都是使用modelValue
作为 prop,并以update:modelValue
作为对应的事件。我们可以通过给v-model
指定一个参数来更改这些名字:
<MyComponent v-model:title="bookTitle" />
在这个例子中,子组件应声明一个title
prop,并通过触发update:title
事件更新父组件值:
<!-- 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 绑定
我们可以在单个组件实例上创建多个v-model
双向绑定。
组件上的每一个v-model
都会同步不同的 prop,而无需额外的选项:
<UserName v-model:first-name="first" v-model:last-name="last" />
<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
修饰符
在学习输入绑定时,我们知道了v-model
有一些内置的修饰符,例如.trim
,.number
和.lazy
。在某些场景下,你可能想要一个自定义组件的v-model
支持自定义的修饰符。
我们来创建一个自定义的修饰符capitalize
,它会自动将v-model
绑定输入的字符串值第一个字母转为大写:
<MyComponent v-model.capitalize="myText" />
组件的v-model
上所添加的修饰符,可以通过modelModifiers
prop 在组件内访问到。在下面的组件中,我们声明了modelModifiers
这个 prop,它的默认值是一个空对象:
<script setup> const props = defineProps({ modelValue: String, modelModifiers: { default: () => ({}) } }) defineEmits(['update:modelValue']) console.log(props.modelModifiers) // { capitalize: true } </script> <template> <input type="text" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" /> </template>
注意这里组件的modelModifiers
prop 包含了capitalize
且其值为true
,因为它在模板中的v-model
绑定v-model.capitalize="myText"
上被使用了。
有了这个 prop,我们就可以检查modelModifiers
对象的键,并编写一个处理函数来改变抛出的值。在下面的代码里,我们就是在每次<input />
元素触发input
事件时将值的首字母大写:
<script setup> const props = defineProps({ modelValue: String, modelModifiers: { default: () => ({}) } }) const emit = 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
绑定,生成的 prop 名将是arg +"Modifiers"
。举例来说:
<MyComponent v-model:title.capitalize="myText">
相应的声明应该是:
const props = defineProps(['title', 'titleModifiers']) defineEmits(['update:title']) console.log(props.titleModifiers) // { capitalize: true }