vue3 el-form表单校验规则在父组件触发

目前情况是 我form表单写在子组件，点击click在父组件，我想点击后在父组件触发校验

一. 取消el-form * 显示

 :hide-required-asterisk="true"

二. 子组件form表单设定校验规则后

 <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules"...


const rules = reactive({
  name: [
    { required: true, message: '请输入子票名称', trigger: 'blur' },
  ],
})



const ruleFormRef = ref();// ref

const validateFormMethod = () => {
  return new Promise((resolve, reject) => {
    if (ruleFormRef.value) {
      ruleFormRef.value.validate((valid) => {
        if (valid) {
          console.log('表单验证通过');
          resolve(valid);
        } else {
          console.log('表单验证不通过');
          reject(new Error('表单验证不通过'));
        }
      });
    } else {
      reject(new Error('表单引用未定义'));
    }
  });
};
defineExpose({
  ruleForm,
  validateFormMethod,

});

三.父组件

<ChildComponent ref="childComponentRef" />

const handlepresent = async () => {
  try {
    const isValid = await childComponentRef.value.validateFormMethod();
    if (isValid) {
      // 表单验证通过，执行一些操作
      console.log('执行操作');
      emit('present' , number.value);
    } else {
      // 表单验证不通过，执行其他操作
      console.log('表单验证不通过');
    }
  } catch (error) {
    console.error('验证过程中发生错误:', error);
  }
};

  <button @click="handlepresent">验证并执行操作</button>

大功告成！可在父组件内触发校验