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

在犍為等地區(qū)，都構建了全面的區(qū)域性戰(zhàn)略布局，加強發(fā)展的系統(tǒng)性、市場前瞻性、產品創(chuàng)新能力，以專注、極致的服務理念，為客戶提供網站設計制作、網站建設 網站設計制作定制網站建設,公司網站建設,企業(yè)網站建設,品牌網站設計,成都營銷網站建設,外貿網站建設,犍為網站建設費用合理。

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

本文操作環(huán)境：windows10系統(tǒng)、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 節(jié)點

如果通過v-for 遍歷想加不同的ref時記得加 :號，即 :ref =某變量 ;

這點和其他屬性一樣，如果是固定值就不需要加 :號，如果是變量記得加 :號。（加冒號的，說明后面的是一個變量或者表達式；沒加冒號的后面就是對應的字符串常量（String）

應注意的坑有：

1、ref 需要在dom渲染完成后才會有，在使用的時候確保dom已經渲染完成。比如在生命周期 mounted(){} 鉤子中調用，或者在 this.$nextTick(()=>{}) 中調用。

2、如果ref 是循環(huán)出來的，有多個重名，那么ref的值會是一個數組 ，此時要拿到單個的ref 只需要循環(huán)就可以了。

vm.$el

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

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

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

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

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

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

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