ref和this.$refs

青灯古佛初照

于 2024-07-31 10:10:55 发布

阅读量164

点赞数 3

分类专栏：前端文章标签：前端 javascript java

本文链接：https://blog.csdn.net/qq676752351/article/details/140815489

版权

16 篇文章 0 订阅

订阅专栏

2024.5.31日笔记

ref加在普通元素上，用this.$refs.ref值获取到的是dom元素。

 <button ref="myButton">   </button> 
 this.$refs.myButton.style.backgroundColor = 'blue'; 可以获取button后设置其style.backgroundColor改变背景颜色。

ref加在子组件上，用this.$refs.ref值获取到的是组件实例，可以使用组件的所有方法，使用方法时则this.$refs.ref值.方法（）就可以使用了。
```
<child-component ref="child"></child-component>

```
利用v-for和ref获取一组数据或dom节点，如果希望通过v-for遍历加不同的ref，需要使用冒号，即:ref （其他属性通常也是这样，加：说明后面的是一个变量或表达式，不加则为固定值，常量）
```
<div :ref="'test'+t.code" v-for="t in classList" :key="t.code"></div>
this.$refs['test'+t.code]获取到的是一个数组
```