VUE的$refs和$el的使用

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

ref 有三種用法：
　　一、ref 加在普通的元素上，用this.$refs.（ref值） 獲取到的是dom元素

　　二、ref 加在子組件上，用this.$refs.（ref值） 獲取到的是組件實例，能夠使用組件的全部方法。在使用方法的時候直接this.$refs.（ref值）.方法（） 就能夠使用了。

　　三、如何利用 v-for 和 ref 獲取一組數組或者dom 節點

 

　　若是經過v-for 遍歷想加不一樣的ref時記得加 :號，即 :ref =某變量 ;

 

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

 

應注意的坑有：

一、ref 須要在dom渲染完成後纔會有，在使用的時候確保dom已經渲染完成。好比在生命週期 mounted(){} 鉤子中調用，或者在 this.$nextTick(()=>{}) 中調用。

二、若是ref 是循環出來的，有多個重名，那麼ref的值會是一個數組 ，此時要拿到單個的ref 只須要循環就能夠了。

 

 

 

vm.$el

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

 

比方說我這裏想獲取自定義組件tabControl，並獲取它的OffsetTop。就須要先獲取該組件。

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

而後 this.$refs.tabControl2     就拿到了該組件 

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

 

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