使用
用过vue的我们应该都知道,v-model可以在组件上使用以实现双向绑定。
<input v-model="searchText" />
// 上面的代码其实是等价于如下这段代码的
<input
:value="searchText"
@input="searchText = $event.target.value"
/>
但是如果我们需要在自定义组件上面使用v-model该如何处理呢?
<!-- CustomInput.vue -->
<script setup>
// 在vue2中我们可以在自定义组件的props中定义model对象:model: {prop: 'value', event: 'input'},通过emit方法触发input事件即可
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有内置的修饰符,比如.lazy,.trim,.number,只需要使用时v-model.lazy即可,如果我们需要自定义修饰符该如何处理呢?
<MyComponent v-model.capitalize="myText" />
// MyComponent.vue
<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>
多v-model绑定
个人觉得,这个在项目中使用到的场景不多,可以了解一下
// UserName.vue
<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>
<script setup>
defineProps({
firstName: String,
lastName: String
})
defineEmits(['update:firstName', 'update:lastName'])
</script>
上面自定义了一个组件,我们在父组件中使用一下:
<template>
<h1>{{ first }} {{ last }}</h1>
<UserName
v-model:first-name="first"
v-model:last-name="last"
/>
</template>
<script setup>
import { ref } from 'vue'
import UserName from './UserName.vue'
const first = ref('John')
const last = ref('Doe')
</script>