vue中ref的用法小结
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
vue中ref的用法
在项目中使用ref时有时候直接取值,有时候返回的却是一个数组,不知其中缘由,后查了一下ref用法,所以总结一下.
1.绑定在dom元素上时,用起来与id差不多,通过this.$refs来调用:
1 2 | <div id= "passCarEchart" ref= "passCarEchart" style= "height: 300px; width: 100%" ></div> console.log( this .$refs.passCarEchart) |
看到打印出来就是绑定的dom对象,可以用来执行一些dom操作,比如操作样式,获取属性等:
1 2 3 4 | 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函数就被设置成数组
1 2 3 4 5 6 7 8 | <div v- for = "item in csGroupNameArr" :key= "item" > <div ref= "arrayDiv" > {{ item }} </div> </div> |
3.ref除了这两个用法,还有另一种用法,绑定在组件标签上:
1 2 3 4 5 | <CheckPoint ref= "checkPoint" v-model= "checkPointNumbers" @clearData= "clearCheckPointData" ></CheckPoint> |
可以看到这次和我们之前绑定在dom元素上有很大的不同,这次获取到的是一个VueComponent对象,里面有这个组件的各个属性,这些属性里面有一个$el,这就是dom对象,就是和我们直接绑定在dom元素上获取的一样:
通过$refs获取的对象中,我们可以看到里面还有我们设置在data里面的变量,我们是可以直接通过这种ref的方式去修改,它就等于拿到那个组件的this,可以直接调用,不仅是data里面的变量,还有methods里面的方法.
4.这种用法还可以在用ui框架的组件的时候,ui框架给我们提供了很多组件的方法,就是要通过这个ref去调用,比如说element-ui的树形组件
例子:
1 | <el-form ref= "personDialogForm" :inline= "true" class= "dialog-form" :model= "form" :rules= "dialogRules" > |
这里就不多介绍用法了,一般组件库官网中各自的用法.
到此这篇关于vue中ref的用法的文章就介绍到这了,更多相关vue ref用法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
vue项目页面嵌入代码块vue-prism-editor的实现
这篇文章主要介绍了vue项目页面嵌入代码块vue-prism-editor的实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-10-10vue中使用echarts刷新可以正常渲染但路由跳转不显示的问题解决
在 Vue 中使用 ECharts 组件时,遇到路由跳转后图表不显示的问题可能是因为组件销毁和重新创建的原因,所以本文给大家介绍了vue中使用echarts刷新可以正常渲染但路由跳转不显示问题的解决方法,需要的朋友可以参考下2024-02-02vue中报错Duplicate keys detected:'1'. This may c
我们在vue开发过程中常会遇到一些错误,这篇文章主要给大家介绍了关于vue中报错Duplicate keys detected:‘1‘. This may cause an update error的解决方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-03-03
最新评论