Vue- ref属性

待我称王封你为后i 2023-10-12 14:33 61阅读 0赞

# ref属性 #

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

通过案例来演示\_ref属性

## 1 编写案例 ##

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

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

![c8f01f990cce877bbddfa921dfe573e5.png][]

页面就是这个样子的

![f7de1fbdae7695d4818bb0f902e622cc.png][]

## 2 传统操作dom ##

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

![542c6992471efb402e0dcb55ae22b535.png][]

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

![db0fcae276a9426d505c1a7305a9053c.png][]

## 3 vue的ref属性 ##

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

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

![953e5494b7b7cef40de506fffc10aa94.png][]

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

![85375d0abc9aa2935661d4ce267a0988.png][]

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

![92d841357cbec40d152a9a0cd255ebd2.png][]

## 4 细节问题 ##

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

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

我们测试下

![070d59ef763a5460468cc36befefe958.png][]

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

![8b65fbf8a1a0aeb36be992db064d9e6d.png][]

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

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

![57895d0f9b76937a68972b62b0f12320.png][]

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

![019a5eb8a2d4535f97712d19de61b5bf.png][]

## 5 ref属性总结 ##

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

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

3 使用方式：

打标识：

# … #

或

获取：this.$refs.xxx

[c8f01f990cce877bbddfa921dfe573e5.png]: https://img-blog.csdnimg.cn/img_convert/c8f01f990cce877bbddfa921dfe573e5.png
[f7de1fbdae7695d4818bb0f902e622cc.png]: https://img-blog.csdnimg.cn/img_convert/f7de1fbdae7695d4818bb0f902e622cc.png
[542c6992471efb402e0dcb55ae22b535.png]: https://img-blog.csdnimg.cn/img_convert/542c6992471efb402e0dcb55ae22b535.png
[db0fcae276a9426d505c1a7305a9053c.png]: https://img-blog.csdnimg.cn/img_convert/db0fcae276a9426d505c1a7305a9053c.png
[953e5494b7b7cef40de506fffc10aa94.png]: https://img-blog.csdnimg.cn/img_convert/953e5494b7b7cef40de506fffc10aa94.png
[85375d0abc9aa2935661d4ce267a0988.png]: https://img-blog.csdnimg.cn/img_convert/85375d0abc9aa2935661d4ce267a0988.png
[92d841357cbec40d152a9a0cd255ebd2.png]: https://img-blog.csdnimg.cn/img_convert/92d841357cbec40d152a9a0cd255ebd2.png
[070d59ef763a5460468cc36befefe958.png]: https://img-blog.csdnimg.cn/img_convert/070d59ef763a5460468cc36befefe958.png
[8b65fbf8a1a0aeb36be992db064d9e6d.png]: https://img-blog.csdnimg.cn/img_convert/8b65fbf8a1a0aeb36be992db064d9e6d.png
[57895d0f9b76937a68972b62b0f12320.png]: https://img-blog.csdnimg.cn/img_convert/57895d0f9b76937a68972b62b0f12320.png
[019a5eb8a2d4535f97712d19de61b5bf.png]: https://img-blog.csdnimg.cn/img_convert/019a5eb8a2d4535f97712d19de61b5bf.png