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.js教學》】

以上是vue中$refs和$el的用法是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！