方法一：
父组件代码：
<template>
<div>
<child ref=childRules addForm=addForm> </child>
<el click=saveForm() size='medium'>保 存</el>
</div>
</template>
[removed]
import childForm from './childForm'
export default {
data(){
return {
addForm: {
name:,
在Vue.js框架中，Element-UI是一个非常流行的前端UI库，它提供了丰富的组件，包括用于构建表单的组件。在处理复杂表单时，我们经常需要在父组件中触发子组件的表单验证。以下是如何在Vue和Element-UI中实现这种父组件控制子组件表单校验的操作。
让我们详细了解这种方法的工作原理：
1. **父子组件通信**：
在Vue中，父组件可以通过`props`向子组件传递数据，而子组件则通过`emit`事件向父组件发送信息。此外，父组件还可以通过`ref`属性来直接访问子组件实例，从而调用子组件的方法。
2. **表单验证**：
Element-UI的`el-form`组件提供了一种内置的表单验证机制，通过`rules`属性定义验证规则，`prop`属性将表单元素与验证规则关联。当`el-form`的`validate`方法被调用时，它会遍历所有表单元素并根据规则进行验证。
3. **父组件代码**：
父组件模板中，我们使用`<child-form ref="childRules" :addForm="addForm">`创建子组件实例，并通过`ref`属性赋予其一个别名`childRules`，这样就可以在父组件的方法中通过`$refs`访问子组件。`addForm`是通过`props`传递给子组件的数据。
父组件的`saveForm`方法中，调用`this.$refs['childRules'].validateForm()`来执行子组件的表单验证。如果验证通过，执行后续逻辑；如果验证失败，显示错误提示。
4. **子组件代码**：
子组件接收来自父组件的`addForm`数据，并在`el-form`中使用`v-model`将其绑定到表单元素。`formRules`定义了验证规则，例如`name`字段需要非空，触发`blur`事件时进行验证。
子组件有一个名为`validateForm`的方法，它调用`this.$refs['ruleForm'].validate()`来执行验证。此方法返回一个回调函数，当验证成功时，`flag`为`true`，否则为`false`，然后将`flag`返回给父组件。
5. **补充知识**：
当遇到表单验证无效的问题时，应检查以下两点：
- 确保`el-form`组件绑定了`model`对象，且该对象的属性与`form-item`的`prop`属性相匹配。
- 验证规则需正确设置，`prop`的值应与输入框`v-model`的值相同。
Vue和Element-UI为我们提供了一种灵活的方式来进行父子组件间的交互和表单验证。通过合理地使用`props`、`ref`和自定义方法，我们可以实现父组件对子组件表单的控制，确保数据的完整性和有效性。同时，理解并遵循Element-UI的表单验证规则能帮助我们避免常见的验证问题。在实际开发中，这样的技巧对于提高用户体验和减少错误是非常重要的。
