Vue的$refs和$el的使用

ref 有三种用法:

1、ref 加在普通的元素上,用this.$refs(ref值) 获取到的是dom元素。

2、ref 加在子组件上,用 this.$refs 获取到的是组件实例,可以使用组件的所有方法。在使用方法的时候直

接this.$refs.XX方法()就可以了。

3、如何利用 v-for 和 ref 获取一组数组或者dom 节点, 如果通过v-for 遍历想加不同的ref时记得加 :号,即 :ref =某变量 ;

应注意的坑有:

1、ref 需要在dom渲染完成后才会有,在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩

子中调用,或者在 this.$nextTick(()=>{}) 中调用。

2、如果ref 是循环出来的,有多个重名,那么ref的值会是一个数组 ,此时要拿到单个的ref 只需要循环就可

以了。v-for用于元素或组件,引用信息是DOM节点或者组件实例的数组 $refs并非响应式,不能在模板中作数

据绑定使用。

vm.$el

获取Vue实例关联的DOM元素;

比方说我这里想获取自定义组件tabControl,并获取它的OffsetTop,就需要先获取该组件。

在组件内设置 属性 ref='一个名称(tabControl2)', 然后 this.$refs.tabControl2,就拿到了该组件

切记:ref属性,而获取组件的时候要用$refs

获取 OffsetTop,组件不是DOM元素,是没有OffsetTop的,无法通过.OffsetTop来获取的。就需要通过$el来

获取组件中的DOM元素

this.tabOffsetTop=this.$refs.tabControl2.$el.offsetTop
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容