Vue- ref属性

Love The Way You Lie 2023-10-12 16:32 7阅读 0赞

# ref属性 #

被用来给元素或者子组件注册引用信息（id的替代者）

通过案例来演示\_ref属性

## 1 编写案例 ##

如图：有一个按钮，点击按钮可以输出dom元素

备注：虽然vue不用我们亲自操作dom，但是有的特殊的情况下就要亲自操作dom

![a704c6bc70c488907e8e0ac064e01aa3.png][]

页面就是这个样子的

![c86d4de45ed2cc54f32741c38b8b0609.png][]

## 2 传统操作dom ##

如果使用传统的方式，给属性一个id，再使用document,getElementById是可以操作的，但是这些代码，本身就不应该出现在vue中，这里我应该给h1id属性的，但是给错了，问题不大

![9c29fee60f6e1353aa8f51c9f5ba98b9.png][]

虽然可以实现，但是不推荐

![635a5c8d4c718823bdc41e5b32e509c4.png][]

## 3 vue的ref属性 ##

原生的html喜欢给元素id标识，在vue中有类似的办法，不过不是使用id而是ref

这里面我给h1标签一个ref属性，然后单击的时候输出vc，可以看到里面有一个$refs属性，里面就死定义的ref属性

![62981d8f1bbf2f1ea97c5271f1493054.png][]

既然已经找到了refs，那么就可以使用$refs编写了

![61e6e76a5a3b01b82e24f60298f26736.png][]

也是可以正常拿到dom元素的

![626fc05af9a240597daa32a2edddd016.png][]

## 4 细节问题 ##

### 组件标签ref属性 ###

上面我是给h1标签加了ref属性，h1属性html标签，但是如果想给school标签加ref呢？school可是组件标签

我们测试下

![dee2c99ffe0047e0ff650c9de7c41085.png][]

发现如果给组件标签加了ref，得到的就是这个组件的vc实例对象

![566b4c1b9c60bd03138151ab278a2ee8.png][]

### 组件标签id属性 ###

但是如果给组件标签id标识，并且通过dom获取id，获取到的就不是vc实例对象了

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2PybrVBM-1686884067583)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/14af9f946fd9440f914a96445850ab61~tplv-k3u1fbpfcp-zoom-1.image)\]

观察发现得到的是实例的根容器

![ce54446b89c9a416aba7d5bbab939c25.png][]

## 5 ref属性总结 ##

1 被用来给元素或者子组件注册引用信息（id的替代者）

2 应用在html标签上获取的是真实的DOM元素，应用在组件标签上是组件实例对象（vc）

3 使用方式：

打标识：

# … #

或

获取：this.$refs.xxx

[a704c6bc70c488907e8e0ac064e01aa3.png]: https://img-blog.csdnimg.cn/img_convert/a704c6bc70c488907e8e0ac064e01aa3.png
[c86d4de45ed2cc54f32741c38b8b0609.png]: https://img-blog.csdnimg.cn/img_convert/c86d4de45ed2cc54f32741c38b8b0609.png
[9c29fee60f6e1353aa8f51c9f5ba98b9.png]: https://img-blog.csdnimg.cn/img_convert/9c29fee60f6e1353aa8f51c9f5ba98b9.png
[635a5c8d4c718823bdc41e5b32e509c4.png]: https://img-blog.csdnimg.cn/img_convert/635a5c8d4c718823bdc41e5b32e509c4.png
[62981d8f1bbf2f1ea97c5271f1493054.png]: https://img-blog.csdnimg.cn/img_convert/62981d8f1bbf2f1ea97c5271f1493054.png
[61e6e76a5a3b01b82e24f60298f26736.png]: https://img-blog.csdnimg.cn/img_convert/61e6e76a5a3b01b82e24f60298f26736.png
[626fc05af9a240597daa32a2edddd016.png]: https://img-blog.csdnimg.cn/img_convert/626fc05af9a240597daa32a2edddd016.png
[dee2c99ffe0047e0ff650c9de7c41085.png]: https://img-blog.csdnimg.cn/img_convert/dee2c99ffe0047e0ff650c9de7c41085.png
[566b4c1b9c60bd03138151ab278a2ee8.png]: https://img-blog.csdnimg.cn/img_convert/566b4c1b9c60bd03138151ab278a2ee8.png
[ce54446b89c9a416aba7d5bbab939c25.png]: https://img-blog.csdnimg.cn/img_convert/ce54446b89c9a416aba7d5bbab939c25.png