vue3中$refs的基本使用方法

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

vue3中$refs的基本使用方法_第1张图片

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

vue3中$refs的基本使用方法_第2张图片

话不多说,上代码

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


vue3中$refs的基本使用方法_第3张图片

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

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

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

vue3中$refs的基本使用方法_第4张图片

总结

到此这篇关于vue3中$refs的基本使用方法的文章就介绍到这了,更多相关vue3中$refs使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

你可能感兴趣的:(vue3中$refs的基本使用方法)