element-ui - elementUI的验证为什么@click="submitForm(formRef)"可以，而直接使用ref<FormInstance>()就不行？

Question

<template>  <el-form      ref="formRef"      :model="numberValidateForm"      label-width="100px"      class="demo-ruleForm"  >    <el-form-item        label="age"        prop="age"        :rules="[        { required: true, message: 'age is required' },        { type: 'number', message: 'age must be a number' },      ]"    >      <el-input          v-model.number="numberValidateForm.age"          type="text"          autocomplete="off"      />    </el-form-item>    <el-form-item>      <el-button type="primary" @click="submitForm">Submit</el-button>      <el-button @click="resetForm">Reset</el-button>    </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 = () => {  if (!formRef) return  formRef.validate((valid) => {    if (valid) {      console.log('submit!')    } else {      console.log('error submit!')      return false    }  })}const resetForm = (formEl: FormInstance | undefined) => {  if (!formEl) return  formEl.resetFields()}</script>

Answer 1

得是 formRef.value.validate() 吧……
在 script 中使用 ref 的加上 .value

Answer 2

在 Vue 3 的 Composition API 中，ref 是一个响应式引用，它返回一个响应式引用对象，该对象具有一个 value 属性，该属性包含对该引用的实际值的访问。这就是为什么你需要使用 formRef.value 而不是 formRef 来访问表单实例。

在你的代码中，你创建了一个名为 formRef 的响应式引用，并尝试使用它来调用 validate 方法。然而，由于 formRef 是一个响应式引用对象，而不是表单实例，所以不能直接使用它来调用 validate 方法。

如果你想使用 ref 来访问表单实例，你应该在模板中通过 ref 属性直接获取表单实例，然后在方法中使用它。例如：

<template>  <el-form ref="formRef" :model="numberValidateForm" label-width="100px" class="demo-ruleForm">    <!-- ... -->  </el-form></template><script lang="ts" setup>import { ref, onMounted } from 'vue'import { Form, FormInstance } from 'element-plus'const formRef = ref<Form | FormInstance | null>(null)const numberValidateForm = reactive({  age: '',})onMounted(() => {  const formEl = formRef.value  if (formEl) {    formEl.validate((valid) => {      if (valid) {        console.log('submit!')      } else {        console.log('error submit!')        return false      }    })  }})</script>

在上面的代码中，我们在模板中通过 ref 属性获取了表单实例，并在 onMounted 钩子中使用了它来调用 validate 方法。这样就可以使用 ref 来访问表单实例，并在需要的时候进行验证了。