vue3實現父組件提交校驗多個子組件

更新時間：2023年11月22日 14:58:16 作者：再希

這篇文章主要為大家詳細介紹了vue3如何實現父組件在提交事件中校驗多個子組件中的form件,文中的示例代碼講解詳細,有需要的小伙伴可以參考一下

實現功能：在父組件提交事件中校驗多個子組件中的form

父組件：

<script setup lang="ts">
    import {ref, reactive} from 'vue'
    import childForm from './childForm.vue'
    import childForm2 from './childForm2.vue'
    let approvalRef = ref()
    let approvalRef2 = ref()
    let resultArr= reactive([])//存放子組件的數組
    let errListMsg =ref("")//用來存儲錯誤提示
    //這個方法是固定的，用來創(chuàng)建 Promise 實例，為多個組件校驗使用
    const checkForm = (formChild) =>{
        let result = new Promise((resolve,reject)=>{
            formChild.validate((valid,fields)=>{
                if (valid) {
                    console.log('submit');
                    resolve()
                }else{
                    console.log('error');
                    Object.keys(fields).forEach((v,index)=>{
                        if (index==0) {
                            const PropName = fields[v][0].field
                            formChild.scrollToField(PropName)
                            errListMsg.value = fields[v][0].message
                        }
                    })
                    reject()
                }
            })
        })
        resultArr.push(result)
    }
    //提交按鈕事件
    const taskFun = ()=>{
        //獲取該子組件暴露出來的form 的 ref
        const approvalRefChild = approvalRef.value.forms
        const approvalRefChild2 = approvalRef2.value.ruleFormRef
        //調用上面創(chuàng)建好的方法
        checkForm(approvalRefChild)
        checkForm(approvalRefChild2)
        Promise.all(resultArr).then((results)=>{
            console.log('這里是接口請求');
            //校驗通過
        }).catch(err=>{
            //校驗不通過提示
            console.log(errListMsg.value);
            
        })
        resultArr=[]//每次請求完要清空數組
        errListMsg.value=""http://提示也需要清空
    }
</script>
<template>
    <childForm ref="approvalRef"></childForm>
    <childForm2 ref="approvalRef2"></childForm2>
    <button @click="taskFun">提交</button>
</template>

子組件一：

這個是表格可以增刪改的情況，對表格添加輸入校驗

<script setup lang="ts">
    import {ref, reactive} from 'vue'
    import type { FormInstance } from 'element-plus'
    const forms = ref<FormInstance>()
    let info:any = reactive({
        data:[{name:'1'}]
    })
    const formRules = reactive({
    name: [{ required: true, message: '請輸入姓名', trigger: 'change' }],
    role: [{ required: true, message: '請選擇', trigger: 'blur' }]
    })
    defineExpose({
        forms
    })
</script>
<template>
    <el-form :model="info" ref="forms">
        <el-table
        ref="tableRef"
        :data="info.data"
        border>
        <el-table-column align="center" property="name" label="*姓名">
            <template #default="{row,$index}">
                <el-form-item :prop="`data[${$index}].name`" :rules="formRules.name">
                    <el-input placeholder="請輸入姓名" v-model="info.data[$index].name" />
                </el-form-item>
            </template>
        </el-table-column>
        <el-table-column align="center" property="role" label="角色">
            <template #default="{row,$index}">
                <el-form-item :prop="`data[${$index}].role`" :rules="formRules.role">
                    <el-input placeholder="請輸角色" v-model="info.data[$index].role" />
                </el-form-item>
            </template>
        </el-table-column>
        </el-table>
    </el-form>
</template>

子組件二：

這個是普通的form表單情況

<template>
    第二個組件
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <el-form-item label="Activity name" prop="name">
        <el-input v-model="ruleForm.name" />
      </el-form-item>
    </el-form>
  </template>
  
  <script lang="ts" setup>
  import { reactive, ref } from 'vue'
  import type { FormInstance, FormRules } from 'element-plus'
  
  interface RuleForm {
    name: string
  }
  const formSize = ref('default')
  const ruleFormRef = ref<FormInstance>()
  const ruleForm = reactive<RuleForm>({
    name: 'Hello'
  })
  const rules = reactive<FormRules<RuleForm>>({
    name: [
      { required: true, message: '請輸入Activity name', trigger: 'blur' },
      { min: 3, max: 5, message: '長度再3-5位', trigger: 'blur' },
    ]
  })
  defineExpose({ruleFormRef})
  </script>

注意：

1、子組件中的form要添加ref屬性，并使用defineExpose暴露出去，這樣父組件才能獲取到子組件中的ref，才能進行校驗

2、當對表格輸入內容做校驗時prop和v-model綁定的是同一個才能校驗通過

3、當發(fā)現校驗一直不通過時可以查看控制臺打印的的結果，看哪個校驗沒通過

校驗不通過