vue3中的$refs怎么使用

这篇文章主要介绍“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怎么使用”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！