VUE2用elementUI实现父组件中校验子组件中的表单

在Vue 2中使用Element UI实现父组件中验证子组件表单的方法是通过使用$refs来访问子组件内部的表单，并调用Element UI的表单验证方法validate。

父组件代码示例：

<template>
  <div>
    <el-button @click="validateForm">验证子组件表单</el-button>
    <child-component ref="childForm"></child-component>
  </div>
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  methods: {
    validateForm() {
      this.$refs.childForm.$refs.form.validate((valid) => {
        if (valid) {
          alert('表单验证通过');
        } else {
          alert('表单验证失败');
        }
      });
    }
  }
};
</script>

子组件代码示例：

<template>
  <el-form ref="form" :model="form" :rules="rules">
    <el-form-item prop="username">
      <el-input v-model="form.username" autocomplete="off"></el-input>
    </el-form-item>
    <!-- 其他表单项 -->
  </el-form>
</template>
 
<script>
export default {
  data() {
    return {
      form: {
        username: '',
        // 其他数据绑定
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
          // 其他验证规则
        ],
        // 其他表单规则
      }
    };
  }
};
</script>

在父组件中，你需要定义一个方法validateForm，在这个方法中，使用this.$refs.childForm.$refs.form.validate来访问子组件中表单的验证方法，并传入一个回调函数来处理验证结果。

在子组件中，你需要定义一个ref属性为"form"的<el-form>元素，这样父组件才能通过this.$refs.childForm.$refs.form来访问到它。同时，你需要定义data中的form对象和rules规则，这些是Element UI表单验证所需的。