### Vue.js 中 el-form-item 父组件与子组件的表单校验实现方式 在 Vue.js 中，当 `el-form-item` 位于父组件而输入框位于子组件时，可以通过以下方法实现表单校验。 #### 方法概述 1. **使用 Ref 引用子组件**：父组件通过 `ref` 获取子组件实例，并调用子组件中定义的方法或属性。 2. **自定义校验规则**：在父组件中定义校验规则并通过 `props` 或事件将数据传递给子组件。 3. **子组件暴露校验逻辑**：子组件需要提供一个方法供父组件调用以触发校验。 以下是具体的实现代码示例： #### 父组件代码 ```vue <template> <div> <el-form :model="form" :rules="rules" ref="formRef"> <!-- 父组件中的 el-form-item --> <el-form-item label="用户名" prop="username"> <!-- 子组件作为输入框 --> <ChildComponent ref="childComponentRef" v-model="form.username" /> </el-form-item> <el-button type="primary" @click="handleSubmit">提交</el-button> </el-form> </div> </template> <script> import { ref } from 'vue'; import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, setup() { const form = ref({ username: '', }); const rules = { username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 10, message: '长度应在 3 到 10 个字符之间', trigger: 'blur' }, ], }; const formRef = ref(null); const childComponentRef = ref(null); const handleSubmit = async () => { try { // 调用 el-form 的 validate 方法 await formRef.value.validate(); // 调用子组件的校验方法 const isValid = await childComponentRef.value.validateInput(); if (isValid) { console.log('表单验证通过'); } else { console.log('子组件校验失败'); } } catch (error) { console.error('表单验证失败:', error); } }; return { form, rules, formRef, childComponentRef, handleSubmit, }; }, }; </script> ``` #### 子组件代码 ```vue <template> <el-input v-model="localValue" @input="handleInput" /> </template> <script> import { ref, watch } from 'vue'; export default { props: { modelValue: { type: String, default: '', }, }, emits: ['update:modelValue'], setup(props, { emit }) { const localValue = ref(props.modelValue); watch( () => props.modelValue, (newValue) => { localValue.value = newValue; } ); const handleInput = (value) => { localValue.value = value; emit('update:modelValue', value); }; const validateInput = () => { if (!localValue.value.trim()) { console.error('输入框内容不能为空'); return false; } return true; }; return { localValue, handleInput, validateInput, }; }, }; </script> ``` #### 关键点解析 1. **父组件控制校验流程**：父组件通过 `el-form` 的 `validate` 方法进行整体校验[^1]。 2. **子组件暴露校验方法**：子组件通过 `validateInput` 方法提供独立的校验逻辑[^3]。 3. **双向绑定数据**：使用 `v-model` 实现父组件与子组件之间的数据同步[^2]。 ### 注意事项 - 确保子组件的校验逻辑与父组件的校验规则一致，避免冲突。 - 如果子组件中有复杂的校验逻辑（如动态规则），可以在子组件中定义并返回结果给父组件。 ---