vue form表单父页面对子组件进行校验

在做vue项目时，pc端经常会有这样的需求：在父页面对多个子组件中的form表单字段进行校验后，在父页面进行保存。解决这个需求的方法：在每个子组件中写入form表单的校验方法，在父页面对子页面中的校验方法进行调用。

子组件页面

<template>
  <div class="hello">
    <el-form ref="form" :model="form" :rules="rules">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name">
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "test",
  data() {
    return {
      form: { name: "" },
      rules: {},
    };
  },
  methods: {
   // 子页面的校验方法，status用来判断是否校验成功
    validateHandle() {
      let status = null;
      this.$refs["form"].validate((val) => {
        if (val) {
          status = true
        }else {
          status = false
        }
      });
    },
  },
};
</script>

父组件页面：

<template>
  <div class="hello">
    <el-button type="primary" @click="submitHandle">保存</el-button>
    <!-- 子组件的引入 -->
    <children ref="children"/>
  </div>
</template>

<script>
import children from './test'
export default {
  name: "test",
  components:{
    children
  },
  data() {
    return {
      form: { name: "" },
      rules: {},
    };
  },
  methods: {
    submitHandle () {
      // 调用子组件中的validateHandle校验方法
      const result = this.$refs['children'].validateHandle()
      if (result) {
        console.log('子组件校验成功')
      }else{
        console.log('子组件校验失败')
      }
    }
  },
};
</script>