vue中$refs和$el怎么使用

這篇文章主要介紹“vue中$refs和$el怎么使用”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“vue中$refs和$el怎么使用”文章能幫助大家解決問題。

用法：1、“$refs”用于給元素或子組件注冊引用信息，語法“this.$refs.(ref值)”或“this.$refs.(ref值).方法() ”；2、“$el”用于獲取Vue實例關聯的DOM元素，語法“this.$refs.組件”。

本文操作環境：windows10系統、Vue2.9.6版，DELL G3電腦。

vue中$refs和$el的用法是什么

ref 被用來給元素或子組件注冊引用信息

ref 有三種用法：

　　1、ref 加在普通的元素上，用this.$refs.（ref值） 獲取到的是dom元素

　　2、ref 加在子組件上，用this.$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.$el

獲取Vue實例關聯的DOM元素；

比方說我這里想獲取自定義組件tabControl，并獲取它的OffsetTop。就需要先獲取該組件。

在組件內設置   屬性 ref='一個名稱(tabControl2)',

然后 this.$refs.tabControl2     就拿到了該組件

切記：ref屬性，而獲取組件的時候要用$refs

獲取  OffsetTop，組件不是DOM元素，是沒有OffsetTop的，無法通過 點 .OffsetTop來獲取的。就需要通過$el來獲取組件中的DOM元素

關于“vue中$refs和$el怎么使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。