vue3中使用$refs

最新推荐文章于 2024-08-19 22:18:34 发布

a10534126

最新推荐文章于 2024-08-19 22:18:34 发布

阅读量2.1k

点赞数

分类专栏：前端 html 文章标签： maven java intellij-idea

本文链接：https://blog.csdn.net/a10534126/article/details/123304216

版权

本文介绍了在Vue3中如何获取并使用$refs，特别是在使用ElementPlus进行表单验证时的注意事项。由于Vue3移除了this，需要采用新的方式获取$refs。在表单外层包裹的情况下，应在特定事件触发后，如dialog的v-model变为true时，才能获取到validate方法。此外，还提到了通过getCurrentInstance方法进行引用获取。

摘要由CSDN通过智能技术生成

1、在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.old