首頁  >  文章  >  web前端  >  vue中$refs和$el的用法是什麼

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

WBOY
WBOY原創
2022-02-15 15:34:285032瀏覽

用法:1、「$refs」用於給元素或子元件註冊引用訊息,語法「this.$refs.(ref值)」或「this.$refs.(ref值).方法() 」;2、「$el」用於取得Vue實例關聯的DOM元素,語法「this.$refs.元件」。

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

本文操作環境: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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn