标签：可读性 admin export post button 响应式 mod click await
vue3用composition api 取代了之前的options api，并且加强了支持typescript，另代码可读性和可改性更强了，用习惯了setup函数真的可以说句，真香。
但是不可避免的，需要趟一些雷，比方说element-plus的表单验证功能。由于setup里取消了this获取实例，就突然变得不知所措。以下是我填坑的一些经验。
先看element-plus官方文档中的验证写法。
methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert(‘submit!‘); } else { console.log(‘error submit!!‘); return false; } }); }, }
可以看到，element-plus的官方示例中，还是按照vue2的options api写法。这显然是我们不会采用的。
于是上网搜索资料，发现很多人说要引用getCurrentInstance方法来获取实例，这个方法是取代vue2中的this的。引用方法是在当前组件import。
import {getCurrentInstance} from "vue";
我们console了一下，发现确实可以找到$refs，但是这个方法显然不是很好的，而且是开发环境中用做调试的方法。我就不详细说了，可以看下面这篇文章，写的很详细。
https://juejin.cn/post/6901087576195760141
我比较吃惊的是，竟然有一些培训机构就用这个方法去写案例进行培训。vue3设计初不就是不让你这样获取实例，否则取消this干嘛呢？你这样取巧绕过去，真的没问题吗？
但是还有一种获取实例的方法，就是在setup中传入context参数，这个我没仔细研究，就是传入打印了一下，没看到自己想要的东西。
于是我们不如从reactive refs api入手。
看相关资料，发现reactive主要作为定义响应式对象，而ref主要作为响应式单值。当然这是我粗浅的理解，因为两个方法可以互相嵌套。
而且还有torefs，unref，toref等等等等很多api，一时间需要一些时间消化。
可以参考https://blog.csdn.net/Yomuki/article/details/112563904
所以，我们的表单验证就可以这么去写。
<el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on" label-position="left" > <el-form-item prop="username"> <el-input ref="username" v-model="loginForm.username" :placeholder="请输入用户名" name="username" type="text" tabindex="1" autocomplete="on" /> </el-form> <el-form-item prop="password"> <el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType" :placeholder="请输入密码" name="password" tabindex="2" autocomplete="on" @keyup="checkCapslock" @blur="capsTooltip = false" @keyup.enter="handleLogin" /> </el-form> <el-button :loading="loading" type="primary" style="width:100%; margin-bottom:30px;" @click="handleLogin()" > 登录 </el-button> </el-form>
import{自己写} from ‘vue‘
export default defineComponent({
setup(){
const loginRules=ref({.....})
const handleLogin = async () => {
const form = unref(loginFormRef);
if (!form) return;
await form.validate((valid: boolean) => {
console.log(1, valid);
...
});
}
}
})
vue3+typescript+element-plus表单验证(非获取实例)
标签：可读性 admin export post button 响应式 mod click await
原文地址：https://www.cnblogs.com/delgoh/p/14276576.html
