如何在Vue3中结合vee-validate使用input组件并实现v-model绑定

以下是你大概率遗漏的配置项：

1. 符合Vue3自定义组件v-model规范 #

自定义input组件必须声明modelValue属性和update:modelValue事件，这是Vue3原生v-model的基础要求：

<script setup>
// 自定义组件内声明
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
</script>

2. 开启useField的v-model同步配置 #

调用useField时必须传入第三个配置项{ syncVModel: true }，否则vee-validate内部维护的字段值和外部v-model是完全独立的，不会自动同步：

import { useField } from 'vee-validate'

// name为字段标识，rules为校验规则，第三个参数开启v-model同步
const { value, errorMessage } = useField(
  props.name,
  props.rules,
  { syncVModel: true }
)

3. 绑定原生input的事件与值 #

把useField返回的value绑定到原生input的value属性，input触发时同步抛出update:modelValue事件：

<template>
  <input 
    type="text"
    :value="value"
    @input="emit('update:modelValue', $event.target.value)"
  >
  <span v-if="errorMessage" class="error-tip">{{ errorMessage }}</span>
</template>

4. 父组件调用时必填参数 #

使用自定义组件时必须传入name属性，vee-validate依赖该属性识别对应校验字段：

<!-- 父组件内使用 -->
<CustomInput
  v-model="form.username"
  name="username"
  rules="required|min:2"
/>

常见遗漏检查清单 #

• 未声明modelValue属性和update:modelValue事件
• 未给useField开启{ syncVModel: true }配置
• 自定义组件未接收name属性，或父组件调用时未传name
• 原生input的输入事件未正确抛出更新事件

内容的提问来源于stack exchange，提问作者user2389511