采用 emit 主动回传校验结果，子组件内聚校验逻辑并按 field 标识触发 validate 事件，父组件聚合状态、统一决策；支持同步/异步、防抖、错误提示与样式联动，结构清晰、响应式强、易于测试。
用 emit 回传校验结果，关键不是“把错误塞给父组件”，而是让每个子组件自主完成校验、主动报告状态，由父组件做聚合与决策。这种方式避免了手动遍历 ref、绕过响应式、或强依赖全局校验器，结构清晰且易于测试。
子组件：校验逻辑内聚，只负责“我说了算”
每个表单项（如输入框、选择器）应封装自己的规则：非空、邮箱格式、最小长度等。校验触发时机建议设为 @blur（失焦）或 @input（实时，需防抖），而非等待提交时统一拉取值。
- 使用
defineEmits(['validate'])显式声明事件，明确通信契约 - 校验后调用
emit('validate', { valid: boolean, message: string, field: 'email' })，带字段标识便于父组件归类 - 支持
v-model双向绑定时，同时触发update:modelValue和validate，保持数据与状态同步
父组件：收拢状态，控制流程而非细节
父组件不主动查子组件的值，而是监听所有子项的 validate 事件，用 reactive 对象动态收集结果：
- 初始化
fieldStatus = reactive({})，例如{ email: { valid: true }, password: { valid: false, message: '至少6位' } } - 每次收到 validate 事件，按
field键更新对应条目，自动触发视图响应 - 提交按钮绑定
@click.prevent，先触发所有子项validate（可调用子组件暴露的validate()方法），再汇总Object.values(fieldStatus)判断是否全通过
校验反馈与交互一致性
仅返回布尔值不够，用户需要知道“哪里错了、为什么错”。回传结构建议固定含三个字段：
-
valid：布尔值，表示当前字段是否通过 -
message：字符串，错误提示（为空则代表无错） -
field：字符串，唯一标识该字段（如'phone'），用于定位和样式控制（如加is-invalid类）
父组件可基于此统一渲染错误信息，或透传给 <el-form-item> 等 UI 层组件，保持视觉与逻辑一致。
进阶：支持异步校验与节流
当校验涉及 API 调用（如用户名是否已存在），子组件应返回 valid: 'pending' 状态，父组件据此禁用提交按钮并显示加载态；待 Promise settle 后再次 emit('validate', ...) 更新结果。
- 对高频
@input触发的校验，建议在子组件内部做防抖（如 300ms），避免频繁 emit 影响性能 - 父组件无需感知是同步还是异步校验，统一按事件驱动处理，解耦干净
