vue $ref和$ el的使用

最新推荐文章于 2024-08-16 07:38:35 发布

马码码1997

最新推荐文章于 2024-08-16 07:38:35 发布

阅读量1.5k

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_44866262/article/details/106328061

版权

笔记专栏收录该内容

20 篇文章 0 订阅

订阅专栏

$ ref
ref 被用来给元素或子组件注册引用信息
ref 有三种用法：
　　1、ref 加在普通的元素上，用this. $r e f s . （ r e f 值）获取到的是 d o m 元素 2 、 r e f 加在子组件上，用 t h i s .$ refs.（ref值）获取到的是组件实例，可以使用组件的所有方法。在使用方法的时候直接this. $refs.（ref值）.方法（）就可以使用了。　　3、如何利用 v-for 和 ref 获取一组数组或者dom 节点　　如果通过v-for 遍历想加不同的ref时记得加 :号，即 :ref =某变量 ; 　　这点和其他属性一样，如果是固定值就不需要加 :号，如果是变量记得加 :号。（加冒号的，说明后面的是一个变量或者表达式；没加冒号的后面就是对应的字符串常量（String）应注意的坑有： 1、ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用，或者在 this.$ nextTick(()=>{}) 中调用。
2、如果ref 是循环出来的，有多个重名，那么ref的值会是一个数组，此时要拿到单个的ref 只需要循环就可以了。

vm. $e l 获取 V u e 实例关联的 D O M 元素；比方说我这里想获取自定义组件 t a b C o n t r o l ，并获取它的 O f f s e t T o p 。就需要先获取该组件。在组件内设置属性 r e f =^{'} 一个名称 (t a b C o n t r o l 2)^{'}, 然后 t h i s .$ refs.tabControl2 就拿到了该组件
切记：ref属性，而获取组件的时候要用 $r e f s 获取 O f f s e t T o p ，组件不是 D O M 元素，是没有 O f f s e t T o p 的，无法通过点 . O f f s e t T o p 来获取的。就需要通过$ el来获取组件中的DOM元素在这里插入图片描述

马码码1997

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue $ref和$ el的使用

$ refref 被用来给元素或子组件注册引用信息ref 有三种用法：　　1、ref 加在普通的元素上，用this.refs.（ref值）获取到的是dom元素　　2、ref加在子组件上，用this.refs.（ref值）获取到的是dom元素　　2、ref 加在子组件上，用this.refs.（ref值）获取到的是dom元素　　2、ref加在子组件上，用this.refs.（ref值）获取到的是组件实例，可以使用组件的所有方法。在使用方法的时候直接this.refs.（ref值）.方法（）就可以使
复制链接

扫一扫