Vue 3 自定义表单组件接收外部校验规则的核心是通过 props 声明 Record<string, FormRule[]> 类型的 rules，并用 props.prop 动态匹配字段规则，透传给 el-form-item 实现校验联动。

Vue 3 中自定义表单组件接收外部校验规则，核心是通过 props 暴露规则接口，并在内部与 Element Plus（或原生逻辑）的校验机制对齐。关键不在“传进来”，而在“怎么接住、怎么用”。

必须接收的 props 结构

外部传入的规则应是标准的 FormRules 类型对象（Element Plus）或兼容结构，例如：

• 字段名作为 key：如 username、email
• 每个 key 对应一个规则数组：每条规则含 required、pattern、validator、trigger 等字段
• 不强制要求包含 message，但建议提供，否则需内部兜底默认提示

组件内如何声明和使用这些规则

在子组件 <MyInput> 或 <FormInput> 中：

• 用 defineProps 声明 rules prop，类型推荐 Record<string, FormRule[]> 或宽松的 any（开发期可加类型守卫）
• 将传入的规则按字段名提取，例如：props.rules[props.prop]，其中 props.prop 是当前输入项绑定的字段名（如 "email"）
• 把提取出的规则透传给内部 <el-form-item :rules="fieldRules">，确保 prop 属性也同步设置为相同值

支持 v-model + 规则联动的关键点

要让自定义组件既支持双向绑定，又能触发校验，需满足：

Ainative Vue Sdk

使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……

下载

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

• v-model 绑定的数据字段名（如 v-model="form.email"）必须与 prop 值、rules 的 key 完全一致
• 组件内部 <el-form-item> 的 prop 属性不能写死，必须由父级传入的 prop prop 动态决定
• 如果使用 emits: ['update:modelValue'] 实现 v-model，务必保证 modelValue 变化时，不干扰 el-form 的校验状态缓存（常见坑：手动赋值后未调用 clearValidate）

父组件调用示例（清晰对应关系）

父组件这样传：

<FormInput 
  v-model="form.email" 
  prop="email" 
  :rules="rules" 
/>

其中 rules 是：

const rules = {
  email: [
    { required: true, message: '邮箱必填', trigger: 'blur' },
    { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
  ]
}

子组件内部就能靠 props.prop 精准拿到 rules.email，完成规则注入。