vue3中$refs的基本使用方法
更新时间：2022年03月31日 14:41:32 作者：一个什么都不会的前端
在Vue中一般很少会用到直接操作DOM，但不可避免有时候需要用到，这时我们可以通过ref和$refs这两个来实现,下面这篇文章主要给大家介绍了关于vue3中$refs的基本使用方法,需要的朋友可以参考下
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.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的基本使用方法的文章就介绍到这了,更多相关vue3中$refs使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vue中如何使用唯一标识uuid(uuid.v1()-时间戳、uuid.v4()-随机数)
这篇文章主要给大家介绍了关于vue中如何使用唯一标识uuid(uuid.v1()-时间戳、uuid.v4()-随机数)的相关资料,当使用Vue.js生成UUID时,我们可以使用uuid库来帮助我们生成通用唯一标识符(UUID),需要的朋友可以参考下2023-12-12
vue版本升级相信大家应该都遇到过,下面这篇文章主要给大家介绍了关于Vue版本vue2.9.6升级到vue3.0的详细步骤,文中通过图文介绍的非常详细,需要的朋友可以参考下2022-09-09
本篇文章主要介绍了Vuex 模块化(module)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了Vue.js自定义指令的基本使用详情,文章围绕主题展开详细的内容介绍，具有一定的参考价值需要的小伙伴可以参考一下2022-05-05
这篇文章主要介绍了用vue2.0实现点击选中active其他选项互斥的效果，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
这篇文章主要介绍了auto-vue-file:一个自动创建vue组件的包,需要的朋友可以参考下2019-04-04
在我们写vue项目的时候,都会引入一些组件库,有时候有可能还不止一个组件库,那么如何优雅的实现自动引入组件呢,下面小编就来和大家详细讲讲吧2023-09-09
在不久之前,看到一个比较有意思的小程序,就是静神木鱼,可以实现在线敲木鱼,自动敲木鱼,手盘佛珠,静心颂钵的，下面就来揭秘如何实现这个小程序中敲木鱼的累加向上漂浮动画，需要的可以参考一下2022-11-11
下面小编就为大家分享一篇webpack配置导致字体图标无法显示的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了Vue获取页面元素的相对位置的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
最新评论