这篇文章主要介绍“vue3中的$refs怎么使用”,在日常操作中,相信很多人在vue3中的$refs怎么使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue3中的$refs怎么使用”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
在vue2中可以通过this来访问到$refs,vue3中由于没有this所以获取不到了,但是官网中提供了方法来获取
知道了怎么获取后,我们结合ElementPlus来使用,因为项目中用到了ElementPlus的表单验证,官网也是醉了,还写的是vue2的写法
话不多说,上代码
由于我得form表单外面包了一层el-dialog
,是不能在onMounted中获取到$refs的,应该在触发对应事件,让dialog绑定的v-model变为true的获取获取
label-position="left" label-width="120px" :model="form" :append-to-body="true" :fullscreen="true" :rules="rules" ref="ruleForm" > <el-form-item label="旧密码" prop="oldPwd"> <el-input v-model="form.oldPwd" placeholder="请输入新密码"></el-input> </el-form-item></el-form><script>import { ref} from 'vue'export default {setup() {const ruleForm = ref(null)// 提交修改密码 const submitForm = () => { console.log(ruleForm.value) ruleForm.value.validate(vaild => { if (vaild) { console.log(1111) } else { console.log(222) } }) }}}</script>
这时候就能获取到他下面的validate方法了
第二种方法,也可以通过getCurrentInstance
在控制台输出一下这个方法就能看到
到此,关于“vue3中的$refs怎么使用”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!