vue2.0 ElementUI父子组件实现子组件表单校验

在Vue 2.0和Element UI中，可以通过以下步骤实现父组件控制子组件表单的验证：

1. 在子组件中使用ref属性来引用Element UI的表单组件（例如el-form）。
2. 在子组件中暴露一个方法，用于触发表单验证。
3. 在父组件中通过ref属性引用子组件，并调用子组件暴露的验证方法。

以下是具体实现的代码示例：

子组件（ChildComponent.vue）:

<template>
  <el-form ref="formRef">
    <!-- 表单内容 -->
    <el-form-item prop="name">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
  </el-form>
</template>
 
<script>
export default {
  data() {
    return {
      form: {
        name: ''
      }
    };
  },
  methods: {
    validateForm() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          // 验证通过的逻辑
        } else {
          // 验证不通过的逻辑
        }
      });
    }
  }
};
</script>

父组件（ParentComponent.vue）:

<template>
  <div>
    <child-component ref="childComponent"></child-component>
    <el-button @click="validateChildForm">验证子表单</el-button>
  </div>
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  methods: {
    validateChildForm() {
      this.$refs.childComponent.validateForm();
    }
  }
};
</script>

在这个例子中，子组件包含一个表单，并有一个方法validateForm用于触发表单验证。父组件有一个按钮点击事件validateChildForm，当被触发时，它会调用子组件的validateForm方法来验证子组件中的表单。