問題現象是點擊更多按鈕之后,加載需要跳轉的路由模塊,同時頂部導航欄的下拉框需要消失。
因為vue本身就是單頁面應用,這個項目的結構是頭部,中間以及底部。
在這里可以利用vue的v-if條件語句來達到組件的重建和銷毀。
一般來說,我們用的最多的就是父子組件之間的相互通信,但是在這個項目中是爺爺組件和孫子組件之間的通信,所以prop和$emit是無法達到效果的(因為他們只能在父子組件之間進行數據的傳遞)。這時就需要考慮到
provide / inject 組合,作用:允許一個祖先組件向其所有子孫后代注入一個依賴,不論組件層次有多深,並在起上下游關系成立的時間里始終生效。
代碼實現方式:
祖先組件中:
后代組件中:
這樣的話,后代組件中就可以調用祖先組件中的reload方法來實現祖先組件v-if值的切換,實現祖先組件的銷毀與重建。