vue中ref的用法小结

更新时间：2023年11月16日 15:44:40 作者：小锅盖快跑

在项目中使用ref时有时候直接取值,有时候返回的却是一个数组,不知其中缘由,后查了一下ref用法,在这里给大家分享vue中ref的用法,感兴趣的朋友一起看看吧

vue中ref的用法

在项目中使用ref时有时候直接取值,有时候返回的却是一个数组,不知其中缘由,后查了一下ref用法,所以总结一下.

1.绑定在dom元素上时，用起来与id差不多，通过this.$refs来调用:

<div id="passCarEchart" ref="passCarEchart" style="height: 300px; width: 100%"></div>
console.log(this.$refs.passCarEchart)

看到打印出来就是绑定的dom对象，可以用来执行一些dom操作，比如操作样式，获取属性等:

let passCarEchart= this.$refs.passCarEchart
passCarEchart.style.height = '200px'
passCarEchart.style.background = 'red'
console.log(passCarEchart.clientHeight)

2.如果refs自身的dom，或父级的dom是通过v-for渲染出来的，vue框架就会把refInFor设置成true，然后ref.key在registerRef函数就被设置成数组

<div
 v-for="item in csGroupNameArr"
  :key="item"
>
 <div ref="arrayDiv">
    {{ item }}
  </div>
</div>

this.$nextTick(() => {
     console.log(this.$refs.arrayDiv,'arrayDiv')
   })

3.ref除了这两个用法，还有另一种用法，绑定在组件标签上:

<CheckPoint
        ref="checkPoint"
        v-model="checkPointNumbers"
        @clearData="clearCheckPointData"
      ></CheckPoint>

console.log(this.$refs.checkPoint)

可以看到这次和我们之前绑定在dom元素上有很大的不同，这次获取到的是一个VueComponent对象，里面有这个组件的各个属性，这些属性里面有一个$el，这就是dom对象，就是和我们直接绑定在dom元素上获取的一样:

console.log(this.$refs.checkPoint.$el)

通过$refs获取的对象中,我们可以看到里面还有我们设置在data里面的变量，我们是可以直接通过这种ref的方式去修改，它就等于拿到那个组件的this，可以直接调用，不仅是data里面的变量，还有methods里面的方法.

4.这种用法还可以在用ui框架的组件的时候，ui框架给我们提供了很多组件的方法，就是要通过这个ref去调用,比如说element-ui的树形组件

例子:

<el-form ref="personDialogForm" :inline="true" class="dialog-form" :model="form" :rules="dialogRules">

这里就不多介绍用法了,一般组件库官网中各自的用法.

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

您可能感兴趣的文章:

详解如何使用vue-cli脚手架搭建Vue.js项目
这篇文章主要介绍了详解如何使用vue-cli脚手架搭建Vue.js项目 ,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-05-05
Vue中的验证登录状态的实现方法
这篇文章主要介绍了Vue中的验证登录状态的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-03-03
基于vue如何发布一个npm包的方法步骤
这篇文章主要介绍了基于vue如何发布一个npm包的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
基于vue3实现一个抽奖小项目
在公司年会期间我做了个抽奖小项目，非常棒，今天把他分享到脚本之家平台，供大家学习参考，对vue3实现抽奖小项目感兴趣的朋友一起看看吧
2023-01-01
vue引入ueditor及node后台配置详解
这篇文章主要介绍了vue引入ueditor及node后台配置详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-01-01
Vue实现Dialog封装
在写业务的时候很常见的一个场景就是需要在不同的页面调用同一个表单，常用的交互就是把表单以弹窗的形式展示，本文主要介绍了Vue实现Dialog封装，感兴趣的可以了解一下
2021-07-07
分享几个可以助你提高效率的Vue指令
vue是一款渐进式JavaScript框架,渐进式是指由浅到深,由简单到复杂的使用vue框架,下面这篇文章主要给大家分享介绍了几个可以助你提高效率的Vue指令,需要的朋友可以参考下
2022-05-05
elementUI select组件value值注意事项详解
这篇文章主要介绍了elementUI select组件value值注意事项详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
在Vue.js中加载字体的正确方法
这篇文章主要介绍了在Vue.js中加载字体的正确方法,本文通过实例图文相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-04-04
Vue.js中使用Vuex但未正确配置Store问题以及解决过程
这篇文章主要介绍了Vue.js中使用Vuex但未正确配置Store问题以及解决过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2025-05-05

vue中ref的用法小结

目录

vue中ref的用法

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具