Vue.js 中使用 Element Plus 的 ElForm 组件的正确方式

在 Vue.js 项目中使用 Element Plus 的 ElForm 组件时，常见的一个错误是将 roleFormRef2 定义为 ref(ElForm)，而 ElForm 不是一个合法的 ref 对象。

错误示例：

const roleFormRef2 = ref(ElForm);

正确做法：

使用 ref 创建一个引用，并将它绑定到 ElForm 组件上。

<template>
  <el-form ref='roleFormRef2'>
    <!-- 表单内容 -->
  </el-form>
</template>

<script>
import { ref } from 'vue';
import { ElForm } from 'element-plus';

export default {
  setup() {
    const roleFormRef2 = ref(null);

    function handleSubmit3() {
      // 在函数内部可以通过 roleFormRef2.value 来访问 ElForm 组件实例
      roleFormRef2.value.validate((valid) => {
        // 其他逻辑
      });
    }

    return {
      roleFormRef2,
      handleSubmit3
    };
  }
}
</script>

解释：

使用 ref(null) 创建一个初始值为 null 的引用 roleFormRef2。
在 ElForm 组件上绑定这个引用，通过 ref='roleFormRef2' 实现。
在 handleSubmit3 函数中通过 roleFormRef2.value 来访问 ElForm 组件实例，并调用其方法 validate 进行表单验证。

总结：

在使用 Element Plus 的 ElForm 组件时，要使用 ref 创建一个引用，并将其绑定到组件上，这样才能通过引用访问组件实例并进行操作。

Vue.js 中使用 Element Plus 的 ElForm 组件的正确方式