在vue項目中終會遇到需要父組件的按鈕或操作控制重新掛載子組件的需求,我在新項目中就遇到這種需求。真實場景是父組件的早,中,晚三個按鈕(代表三個時間段)來控制子組件的table表格列的動態加載。
子組件的顯示隱藏用指令v-if控制,點擊父組件的三個按鈕,可以控制子組件的顯示隱藏,但是子組件不會重新執行生命周期,重新掛載;如圖:沒有操作按鈕時
點擊中按鈕時,也沒有刷新,如圖;
就這個問題,在子組件加上key唯一項即可;
沒改前,子組件使用代碼:
<ob-tab v-if="showTab" :selectedDate="now" :classType="classType"></ob-tab>
改之后代碼:
<ob-tab v-if="showTab" :selectedDate="now" :classType="classType" :key="new Date().getTime()"></ob-tab>
只是給子組件加了:key="new Date().getTime()"的唯一值;下面看效果,如圖:

加入:key="new Date().getTime()"代碼后,子組件的table可以正常重載了