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中移动端调取本地的复制的文本方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
Vue项目中对index.html中BASE_URL的配置方式
这篇文章主要介绍了Vue项目中对index.html中BASE_URL的配置方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要介绍了vue定时器清除不掉,导致功能频繁执行问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
mpvue 是美团开源的一套语法与vue.js一致的、快速开发小程序的前端框架，这篇文章主要介绍了基于mpvue的小程序项目搭建的步骤，非常具有实用价值，需要的朋友可以参考下2018-05-05
当我们把信息化系统给用户使用时，用户经常需要把以前在excel里录入的数据导入的信息化系统里，这样为用户提供了很大的方便，这篇文章主要介绍了vue中或者react中的excel导入和导出,需要的朋友可以参考下2023-09-09
第一次写Vue项目，要用到router.js,看了一下官方文档，还是很懵逼，不知道怎么配置，又去看视频查资料，最后终于搞定了。话不多说，先上代码，我再讲一些要注意的细节2022-12-12
vue如何使用html2canvas和JsPDF导出pdf组件
这篇文章主要介绍了vue如何使用html2canvas和JsPDF导出pdf组件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-09-09
这篇文章主要为大家详细介绍了Vue+ElementUI table实现表格分页，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-12-12
这篇文章主要介绍了vue如何根据条件判断按钮是否可以点击，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
vue自定义插件封装，实现简易的elementUi的Message和MessageBox的示例
这篇文章主要介绍了vue自定义插件封装，实现简易的elementUi的Message和MessageBox的示例，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2020-11-11
最新评论