保定模板做网站,wordpress找不到根目录,肇庆北滘网站设计,国外二维码在线查询vue中ref的用法
在项目中使用ref时有时候直接取值,有时候返回的却是一个数组,不知其中缘由,后查了一下ref用法,所以总结一下.
1.绑定在dom元素上时#xff0c;用起来与id差不多#xff0c;通过this.$refs来调用:
div idpassCarEchart refpassCarEch…vue中ref的用法
在项目中使用ref时有时候直接取值,有时候返回的却是一个数组,不知其中缘由,后查了一下ref用法,所以总结一下.
1.绑定在dom元素上时用起来与id差不多通过this.$refs来调用:
div idpassCarEchart refpassCarEchart styleheight: 300px; width: 100%/divconsole.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函数就被设置成数组
divv-foritem in csGroupNameArr:keyitem
div refarrayDiv{{ item }}/div
/divthis.$nextTick(() {console.log(this.$refs.arrayDiv,arrayDiv)})3.ref除了这两个用法还有另一种用法绑定在组件标签上:
CheckPointrefcheckPointv-modelcheckPointNumbersclearDataclearCheckPointData/CheckPointconsole.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 refpersonDialogForm :inlinetrue classdialog-form :modelform :rulesdialogRules这里就不多介绍用法了,一般组件库官网中各自的用法.
