Element Plus Form ref属性怎么理解

 参考官方的代码,做了一些省略

<template>
  <el-form
    ref="formRef"
    :model="numberValidateForm"
  >
.................省略el-form-item....................

  </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance } from 'element-plus'

const formRef = ref<FormInstance>()

const numberValidateForm = reactive({
  age: '',
})

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!')
    }
  })
}

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

v-model的作用是用来和表单数据双向绑定的,这个没有疑问

v-model和ref缺一不可

ref属性,则是vue提供的,用于获取对元素或子组件的引用，它使我们能够直接访问 DOM 或子组件的方法和属性。比如，如果我们这里想要绑定获取表单实例，我们就要使用 ref，所以我们定义了一个变量来绑定这个表单实例(const formRef = ref<FormInstance>())

ref 来获取对整个表单的引用，以便调用其 validate 或 resetFields 方法进行验证或重置操作。

上面两个方法中formEl实际上，就是我们定义的formRef变量,只不过考虑到方法的复用性(多个表单共享这个方法)，才这样写，其实上述代码的单个表单的情况，可以直接写成formRef.value.resetFields (validate ...)，也是一样的效果