問題描述:
如下圖,頁面是一層組件,彈窗a-modal是二層,a-modal中的樹形結構a-tree組件是第三層組件,當第一次打開彈窗時,會執行第三層a-tree的created()方法,但是關閉彈窗再次打開時,就不會再執行第三層a-tree組件的created()方法了,因為第一次打開彈窗組件時,a-tree組件已經創建了,只是關閉彈窗后不顯示而已,然后打開彈窗,又顯示了,但並不會重新創建該a-tree組件。
帶來的影響是,當希望每次打開彈窗時,a-tree組件中的樹形結構數據並不是最新的,而是在第一次打開彈窗時created()方法中獲取的。
解決思路有兩個:
1、第三層a-tree組件中的屬性結構數據從第二層彈窗組件打開時獲取並傳入第三層a-tree組件中
2、每次打開彈窗組件時,把三層組件的v-if綁定的變量置為false,然后再改為true,這樣a-tree組件就會重新渲染,重新執行created()方法,那在created()方法中去查詢樹形結構數據就可以了
這里第1中方法有問題,就是子組件中需要在獲取數據前設置loading=true,獲取數據后把設置loading=false,有個加載的過程,如果通過向組件傳值的方式,還得單獨處理loading的處理,比較麻煩
我這里用的第2中方法,可以方便的處理loading的變量賦值處理,感覺這樣也比較符合通常的數據加載方式。
二層彈窗組件init方法中重新渲染三層a-tree組件:
三層組件中tree定義: