温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

vue3中的$refs怎么使用

发布时间:2022-03-31 17:15:43 来源:亿速云 阅读:3218 作者:iii 栏目:开发技术

这篇文章主要介绍“vue3中的$refs怎么使用”,在日常操作中,相信很多人在vue3中的$refs怎么使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue3中的$refs怎么使用”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

1、在vue2中可以通过this来访问到$refs,vue3中由于没有this所以获取不到了,但是官网中提供了方法来获取

vue3中的$refs怎么使用

知道了怎么获取后,我们结合ElementPlus来使用,因为项目中用到了ElementPlus的表单验证,官网也是醉了,还写的是vue2的写法

vue3中的$refs怎么使用

话不多说,上代码

由于我得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>

vue3中的$refs怎么使用

这时候就能获取到他下面的validate方法了

第二种方法,也可以通过getCurrentInstance

在控制台输出一下这个方法就能看到

vue3中的$refs怎么使用

到此,关于“vue3中的$refs怎么使用”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI