vue提供一個對象$refs可以獲取DOM夺巩,一般在加載組件時候就需要獲取DOM枝嘶,此時可以在created/mounted鉤子函數(shù)中
this.$refs.xxx
。注意,切記撒璧,this.$refs.xxx
一定要放到this.$nextTick
的方法內(nèi)執(zhí)行透葛,或者在setTimeout
中執(zhí)行,延遲時間一般20ms就可以啦
那么問題來了卿樱,為什么在組件的子組件內(nèi)的created/mounted中添加this.$nextTick
內(nèi)執(zhí)行this.$refs.xxx
卻始終獲取不到DOM呢僚害?
其實原因很簡單,因為子組件內(nèi)的虛擬dom是通過父組件通信過來的數(shù)據(jù)產(chǎn)生的繁调,大概意思就是父組件給子組件一個data列表數(shù)據(jù)萨蚕,子組件通過
v-for
將data數(shù)據(jù)遍歷出來,然后你在created/mounted中通過this.$refs.xxx
來獲取這個列表dom蹄胰,很難獲取到岳遥,因為這個created/mounted執(zhí)行的時候,子組件內(nèi)還沒有數(shù)據(jù)裕寨,所以this.$refs.xxx
無法獲取dom浩蓉,應(yīng)該應(yīng)該用watch來監(jiān)聽data,當(dāng)data接受到父組件傳來的數(shù)據(jù)宾袜,再在this.$nextTick
內(nèi)獲取this.$refs.xxx
watch:{
data(){
this.$nextTick(_=>{
this.$refs.xxx
})
}
}