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修飾符