Vue- ref属性

待我称王封你为后i 2023-10-12 14:33 104阅读 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

发表评论

表情：
评论列表 （有 0 条评论，104人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Vue- ref属性

    ref属性 被用来给元素或者子组件注册引用信息（id的替代者） 通过案例来演示\_ref属性 1 编写案例 如图：有一个按钮，点击按钮可以输出dom元素 备注

    Love The Way You LieLove The Way You Lie/ 0 赞/ 87 阅读

    相关 Vue- ref属性

    ref属性 被用来给元素或者子组件注册引用信息（id的替代者） 通过案例来演示\_ref属性 1 编写案例 如图：有一个按钮，点击按钮可以输出dom元素 备注

    待我称王封你为后i待我称王封你为后i/ 0 赞/ 105 阅读

    相关 14-ref属性

    ref属性 ref属性被用来给元素或子组件注册引用信息（id的替代者），避免在vue中使用`document.getElementById`。 应用在html标签上时，

    怼烎@怼烎@/ 0 赞/ 100 阅读

    相关 Vue与ref属性与refs

    ref 被用来给DOM元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。如果在普通的DOM元素上使用，引用信息就是元素; 如果用在子组件上，引用信息

    - 日理万妓- 日理万妓/ 0 赞/ 347 阅读