小謝第12問:初始化頁面的時候子元件為什麼不渲染?

Musican佩奇發表於2020-06-02

起因:今天在子元件中寫了一個方法,想要在頁面初始化的時候渲染頁面,所以便有了下面的坎坷路程:

今天遇到這個問題後,

想在頁面初始化的時候直接載入子元件,

本來之前用的好好的,

但是今天死活在vue的宣告週期中找不到子元件,

問百度無非就是ref繫結,v-show例項dom之類,

但是這次不載入的原因是根本拿不到子元件,

更別提上面的幾種方法了,

快要崩潰的時候,

對比了和平時寫的子元件與有什麼不同,

終於發現了,子元件是寫在el-dialog彈出框中!!!

而這正是與其他子元件的不同之處,

於是我又扒開了element文件,

定位到dialog這個屬性::visible.sync

文件中的描述是:Dialog 的內容是懶渲染的,即在第一次被開啟之前,傳入的預設 slot 不會被渲染到 DOM 上。因此,如果需要執行 DOM 操作,或通過 ref 獲取相應元件,請在 open 事件回撥中進行。如果 visible 屬性繫結的變數位於 Vuex 的 store 內,那麼 .sync 不會正常工作。此時需要去除 .sync 修飾符,同時監聽 Dialog 的 open 和 close 事件,在事件回撥中執行 Vuex 中對應的 mutation 更新 visible 屬性繫結的變數的值。

腦子看完後說它明白了,

一頓操作後,

當然是不行的

結果-----------------------------------------------------------目前仍然不能初始化拿到子元件,非得點開dialog之後子元件才會渲染

結論-----------------------------------------------------------只能定位到彈框的問題,但是沒有在dialog中渲染的解決方式

最終解決方式:將子元件的方法調到父元件中,將方法放到父元件中的宣告週期內,多定義變數,通過父子傳值方式進行函式引數操作

總結:菜的想哭!!!等待大佬的解決方式!

 

相關文章