v-model 是一个用于在表单输入元素和组件之间进行双向数据绑定的指令。它简化了在父组件和子组件之间同步数据的过程,特别是在处理表单输入时。
基本用法
在模板中,v-model 通常与表单输入元素(如 <input>、<textarea> 或 <select>)一起使用,它将输入元素的值与组件的某个 data 属性进行双向绑定。
<template>
<form>
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
</form>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const message = ref('');
</script>
在这个例子中,message 是一个响应式引用(ref),它与 <input> 元素的值进行双向绑定。当用户在输入框中键入时,message 的值会自动更新,反之亦然。
自定义组件中的 v-model
v-model 的工作方式有所改变,它现在基于 modelValue 作为 prop 和 update:modelValue 作为事件。这使得 v-model 在自定义组件中更加灵活和可配置。
下面是一个自定义输入框组件的例子,它使用 v-model 进行双向数据绑定:
<template>
<input
:value="modelValue"
@input="updateValue($event.target.value)"
type="text"
placeholder="Custom Input"
/>
</template>
<script setup lang="ts">
import { defineProps, defineEmits } from 'vue';
const props = defineProps({
modelValue: {
type: String,
default: ''
}
});
const emit = defineEmits(['update:modelValue']);
const updateValue = (value: string) => {
emit('update:modelValue', value);
};
</script>
在这个自定义组件中,我们定义了一个 modelValue prop 来接收父组件传递的值,并使用 update:modelValue 事件来通知父组件值的变化。当输入框的值发生变化时,我们调用 updateValue 方法并触发 update:modelValue 事件,将新的值传递给父组件。
在父组件中使用自定义组件的 v-model
现在,我们可以在父组件中使用这个自定义输入框组件,并使用 v-model 进行双向数据绑定:
<template>
<CustomInput v-model="customMessage" />
<p>Custom message is: {{ customMessage }}</p>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import CustomInput from './CustomInput.vue';
const customMessage = ref('');
</script>
在这个父组件中,我们引入了 CustomInput 组件,并使用 v-model 将 customMessage 与组件的 modelValue 进行绑定。当用户在自定义输入框中键入时,customMessage 的值会自动更新,反之亦然。
注意事项
- v-model 默认使用 value 作为 prop 和 input 作为事件,但在自定义组件中,你可以使用 modelValue 作为 prop 和 update:modelValue 作为事件来替代它们。
- v-model 也可以用于处理数组或对象等复杂数据类型,但你需要确保在自定义组件中正确处理这些类型的更新。
- 在处理表单验证或复杂逻辑时,可能需要结合使用 watch 或计算属性来监听 v-model 绑定的值的变化。