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组件间传值的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
这篇文章主要为大家详细介绍了vue3限制table表格选项个数的解决方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，今天通过本文给大家分享VSCode开发UNI-APP 配置教程及插件推荐与注意事项，感兴趣的朋友一起看看吧2021-08-08
Vue 中 Promise 的then方法异步使用及async/await 异步使用总结
then 方法是 Promise 中 处理的是异步调用，异步调用是非阻塞式的，在调用的时候并不知道它什么时候结束，也就不会等到他返回一个有效数据之后再进行下一步处理，这篇文章主要介绍了Vue 中 Promise 的then方法异步使用及async/await 异步使用总结,需要的朋友可以参考下2023-01-01
混入(mixin)提供了一种非常灵活的方式，来分发vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项2022-08-08
这篇文章主要介绍了vue-router的两种模式的区别，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-05-05
最近一段时间在研究go.js,它是一款前端开发画流程图的一个插件，也是一个难点，要说为什么是难点，首先，它是依赖画布canvas知识开发，这篇文章主要介绍了vue + gojs 实现拖拽流程图,需要的朋友可以参考下2023-03-03
这篇文章主要介绍了vue 设置proxyTable参数进行代理跨域的相关资料，及代理跨域的概念原理,需要的朋友可以参考下2018-04-04
这篇文章主要介绍了vue 之 .sync 修饰符的相关知识，非常不错，具有参考借鉴价值 ,需要的朋友可以参考下2018-04-04
这篇文章主要介绍了vue 使用monaco实现代码高亮的方法，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-03-03
最新评论