vue mouned裏無法使用this.$refs和getElementById

1.問題起因:

在vue子組件的mounted裏試圖使用this.$refs獲取標籤,然後給標籤添加事件,但是發現一直提示undefined,getElementById也無法起作用,理論上mounted是在組件已經掛載之後的鉤子,應該可以獲取到標籤的

 

2.前提:

我是在子組件的template標籤下的根div設置了v-if,試圖通過在父組件v-bind的方式傳prop值給子組件來控制子組件的顯隱藏

 

3.測試:

測試發現,在我還沒在父組件通過點擊事件讓子組件顯示的情況下,子組件的已經出觸發了mounted,這個就不對了

 

4.結論:

子組件標籤在父組件顯示的時候就已經執行生命週期了,雖然內容不一定有,但是生命週期都執行了。

必須要給在父組件的子組件標籤加上v-if,如果沒有設置v-if="false",雖然能控制子組件根div的隱藏,但是子組件本身的生命週期已經執行,而這個時候子組件又沒有內容,所以this.$refs和getElementById爲undefined或者null

至於子組件怎麼控制怎麼控制父組件裏v-if綁定的值,參考.sync修飾符

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章