用法:1、「$refs」用於給元素或子元件註冊引用訊息,語法「this.$refs.(ref值)」或「this.$refs.(ref值).方法() 」;2、「$el」用於取得Vue實例關聯的DOM元素,語法「this.$refs.元件」。
本文操作環境:windows10系統、Vue2.9.6版,DELL G3電腦。
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中文網其他相關文章!