關於Vue中的ref和 refs的二三事

vue中的ref可以用來給元素或子元件註冊引用資訊，而$refs可以用來獲取ref註冊過的元素或元件，關於這一點概念，其實很容易理解，使用一下就可以上手了，詳細的概念參見 [vue-ref]

[vue-$refs]

但是在實際專案中，會發現，有時候通過this.$refs.ref名稱來獲取對應的dom或元件時，並不能成功，而要在後面加乙個[0]才能成功獲取到。多留心一下，會發現好像是涉及到迴圈時，就會出現這種情況，那不如來多做幾組測試來驗證一下，順便試試各種特殊情況下的特別之處。

太長了，我要直接看結論

part 1 常規用法

當ref用在元件上時，通過$refs獲取的是該元件的例項，可進而呼叫元件內定義的方法、屬性等；

如下圖所示，當ref定義在元件home上時，通過this.$refs.test獲取的是home元件對應的例項物件，通常我們可以通過這種方式來呼叫某個元件內的methods、data中定義的資料、或是進而獲取其子元件等。

ref="test" />
div>
template>
import
home 
from
'./views/home'
export
default
,  mounted () 
}script>

當ref用在dom節點上時，通過$refs獲取的是該dom元素節點。

如下圖所示，當ref定義在dom元素上時，通過this.$refs.test獲取的是該dom元素，且包含子元素，進而可以進行下一步的dom操作。

ref="test">
123span>
p>
div>
template>
export default
}script>

part 2 多處ref引用的值相同時（非v-for內使用時）

當html中ref值相同的節點是兄弟節點時，通過$refs獲取到的是文件中順序靠下的節點（使用在dom上和元件上原則一致，以dom為例）

ref="test">
123span>
p>
ref="test">456span>
div>
template>
export default
}script>

當html中ref值相同的節點是巢狀關係時，比如父子關係，則通過$refs獲取到的是外層節點（使用在dom上和元件上原則一致，以dom為例）

ref="test">
ref="test">123span>
p>
div>
template>
export default
}script>

當html中ref值相同的節點不在同一層級，也不是巢狀關係時，仍然遵循文件中順序靠下的節點被獲取的原則（使用在dom上和元件上原則一致，以dom為例）

ref="test">456p>
ref="test">123span>
p>
div>
template>
export default
}script>

part 3 當ref值是個變數時（非v-for內使用時）

ref值使用變數時，通過this.$refs[變數名稱]指向的依舊是該dom節點或元件例項，不需要加[0]，且當出現ref值重複時，仍然滿足part2實踐中的原則

123span>
p>
div>
template>
export default
},mounted () 
}script>

part 4 ref用在v-for上時

當ref值相同時，this.$refs[ref名稱]獲取到的是該dom節點或元件的陣列，此處以元件為例

v-for="num
inloop" :key="num" ref="test">home>
div>
template>
import
home
from 
'./views/home'
export default
,  data () 
},mounted () 
}script>

當ref值不同時，this.$refs[ref名稱]無法獲取對應的dom節點或是元件，需要在其後追加[0]才可訪問，此處以元件為例

v-for="num
inloop" :key="num" :ref="'test' + num">home>
div>
template>
import
home
from
'./views/home'
export default
,  data () 
},mounted () 
}script>

總結：

1. ref用在dom上時，通過this.$refs[ref名稱]訪問的是該dom元素節點；ref用在元件上時，通過this.$refs[ref名稱]訪問的是該元件的例項物件，可以進而呼叫元件的方法或者獲取元件的屬性等；

2. 當同一元件內部，有多處ref引用值相同的情況時，this.$refs[ref名稱]指向文件流中靠下的元件或dom節點，若是父子關係，則指向父級元件或dom節點；

3. 若ref的值是個變數，只要不是用在v-for裡，通過this.$refs[變數名稱]指向的依舊是該dom節點或元件例項，且當出現ref值重複時，仍然滿足取靠下的節點或是父級節點的規則；

4. 若ref用在v-for裡，當迴圈內的ref值相同時，this.$refs[ref名稱]獲取到的是該dom節點或元件的陣列，當ref值不同時，需提供this.$refs[ref名稱][0]來獲取該dom節點或元件例項。

以上各項實踐可能考慮的情況不一定全，若是有遇到其他情況出現不一樣的用法和結果，再進行補充。

關於Vue中的ref和 refs的二三事

Vue中ref和 refs學習筆記

Vue 中的 ref 和 refs 的使用

vue之 ref 和 refs的使用

關於Vue中的ref和 refs的二三事

Vue中ref和 refs學習筆記

Vue 中的 ref 和 refs 的使用

vue之 ref 和 refs的使用

相關推薦