Vue | Vue中 ref 的用法小结

本文链接：https://blog.csdn.net/sunyctf/article/details/141110776

在项目中使用 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 | vue中 $refs 的三种用法解读_儒雅的烤地瓜的CSDN博客

Vue | vue中$refs的用法及作用详解_儒雅的烤地瓜的CSDN博客

Vue中ref、reactive、toRef、toRefs、$refs的基本用法总结_vue.js_脚本之家