Vue3的表单事件优雅写法

因为V3对TS支持性很高，所以一些组件或者写法都没有V2自由，比如前端的基本功：表单事件，在 Element-Plus 组件库中可以看到

<template>
 <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    :rules="rules"
    label-width="120px"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
  >
 <el-form-item>
     <el-button type="primary" @click="submitForm(ruleFormRef)">
      校验
      </el-button>
      <el-button @click="resetForm(ruleFormRef)">清空</el-button>
    </el-form-item>
</el-form>
</template>
<script lang="ts" setup>
    import { reactive, ref } from 'vue'
    import type { FormInstance, FormRules } from 'element-plus'
    const formSize = ref('default')
    const ruleFormRef = ref<FormInstance>()
    const ruleForm = reactive({})const rules = reactive<FormRules>({})
    const submitForm = async (formEl: FormInstance | undefined) => {
      if (!formEl) return
      await formEl.validate((valid, fields) => {
        if (valid) {
          console.log('submit!')
        } else {
          console.log('error submit!', fields)
        }
      })
    }

    const resetForm = (formEl: FormInstance | undefined) => {
      if (!formEl) return
      formEl.resetFields()
    }

</script>

这是我从组件库扒过来的 简易版 ，从这里可以看到这个我们常用的校验方法和表单清空方法太麻烦了，还要传一个 ref，起来就很麻烦，所以 我找到了一个新的方法去解决这个问题，自由度和V2差不多 那就是  ref.value?.XXX() ,就上面代码 举个例子

   const submitForm  = async() => {
     if (!ruleFormRef) return
        const valid = await ruleFormRef.value.validate()
        if (!valid) return
    }
    const resetForm = async() => {
        ruleFormRef.value?.resetFields()
    }

用这种表单方法的写法，第一更简洁，不会有多余的代码，可读性也更好，也不需要传参，在我这个之前一直用V2去开发项目的码农来说，我更喜欢这种，通俗易懂。