Vue 3自定义表单组件核心是逻辑抽离与UI封装：通过useForm封装验证、提交等能力，用defineProps/defineEmits规范接口，reactive+ref统一管理状态，并支持v-model双向绑定。

Vue 3 中自定义表单组件用组合式 API 编写，核心是“逻辑抽离 + UI 封装”：把验证、状态、提交等通用能力封装成可复用的 Composable 函数（如 useForm），再通过 defineProps 和 defineEmits 实现父子通信，让组件专注渲染和交互。

定义 props 和事件接口

自定义表单组件需明确接收什么字段、支持哪些配置、向外抛出什么事件。使用 defineProps 声明输入结构，defineEmits 声明输出行为：

• props 支持传入字段配置列表（如 label、key、type、rules）
• 支持默认值、禁用态、只读态等控制项
• emits 至少包含 update:modelValue（用于 v-model）、submit、reset、validate-fail 等标准事件

用 reactive + ref 管理内部状态

表单值、错误、加载态等应统一管理，避免散落在多个 ref 中：

vue-composition-api-best-practices

Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。

下载

• formState = reactive({}) 存储所有字段当前值，支持嵌套和动态 key
• errors = reactive({}) 存储各字段校验失败信息
• isSubmitting = ref(false) 控制提交按钮禁用态
• touched = reactive({}) 记录用户是否触碰过某字段（用于懒校验）

封装 useForm 逻辑并复用

把表单核心能力抽象为独立函数，在 setup 中调用，保持组件轻量：

立即学习“前端免费学习笔记（深入）”；

• useForm 接收 initialValues 和 validateRules，返回 validate、submit、reset 等方法
• 每个字段的 v-model 绑定到 formState[key]，不直接操作 props
• watch 某些字段变化时自动触发局部校验（例如邮箱改了就校验格式）
• submit 方法内先整体 validate，成功后 emit('submit', formState)

支持 v-model 双向绑定

让自定义组件像原生 input 一样支持 v-model：

• props 定义 modelValue: { type: Object, default: () => ({}) }
• watch(modelValue, newVal => Object.assign(formState, newVal), { immediate: true })
• 提交或字段变更后，emit('update:modelValue', { ...formState })