vue3+elementui-plus使用setup语法糖,使父组件触发子组件校验

256 阅读1分钟

父组件

<template>
    <el-scrollbar>
        <!--子组件-->
        <AddSelfFunc ref="addFuncformRef"></AddSelfFunc>
    </el-scrollbar>
    <el-button type="primary"  @click="addFunctionSubmit">确定</el-button>
</template>
<script lang="ts" setup>
    const addFuncformRef=ref<FormInstance>()
    // 确定
    async function addFunctionSubmit(){
      await (addFuncformRef.value as FormInstance).validate((value) => {
        if (value) {
          console.log('submit!')
        }else{
          console.log('验证不通过')
        }
      });
    }
 </script> 

子组件

<template>
    <el-form ref="addFunctionFrom" :rules="addFunctionRules">
    //.....
    </el-form>
</template>
<script lang="ts">
export default defineComponent({
    name: 'AddSelfFunc',
    setup(props, context) {
        const addFunctionFrom = ref<FormInstance>();
        // 校验
        function validate(callback){
            addFunctionFrom.value.validate((valid) => {
                callback(valid);
            });
        }
        return {addFunctionFrom,validate}
    }
})
 </script>