新旧Element-plus的坑

在vue没有将setup放在script标签的时候，因为我们在setup函数里无法获取到this，因此会有
（用解构的方式获得）

import { getCurrentInstance } from "vue";
setup(){
	const { ctx } = getCurrentInstance();
}

详细的代码如下

<template>
  <el-form
    ref="loginForm"
    :model="loginUser"
    label-width="100px"
  >
    <el-form-item label="邮箱">
      <el-input
        v-model="loginUser.email"
        placeholder="Enter Email..."
      ></el-input>
    </el-form-item>
    <el-form-item label="密码">
      <el-input
        v-model="loginUser.password"
        type="password"
        placeholder="Enter Password..."
      ></el-input>
    </el-form-item>

    <el-form-item>
      <el-button
        @click="handleLogin('loginForm')"
        type="primary"
        class="submit-btn"
        >提交</el-button
      >
    </el-form-item>
  </el-form>
</template>

<script lang="ts">
import { getCurrentInstance } from "vue";
export default {
  name: "LoginForm",
  setup() {
    // @ts-ignore
    const { ctx } = getCurrentInstance();
	const loginUser = ref({email: "",password: "",});
    // 触发登录方法
    const handleLogin = (formName: string) => {
      ctx.$refs[formName].validate((valid: boolean) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    };
    return { handleLogin };
  },
};
</script>

而在最新的ElementPlus（"element-plus": "^2.2.6"）结合了vue3.x的setup放在script标签语法糖提供了最新的方式

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

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)
    }
  })
}
</script>

但是因为把所有的注意力都放在了script里的代码，导致我按照文档来每次报错：formEl.validate不是一个函数，最后才发现原来是在html代码里有了细微的变化：

<el-form-item>
     <el-button type="primary" @click="onSubmit(userForm)">login</el-button>
     <el-button>register</el-button>
</el-form-item>

注意到点击登录按钮的ref绑定以前都是用@click="onSubmit('userForm')冒号包围，但是最新的是直接@click="onSubmit(userForm)。

最后代码运行成功