背景：在dialog彈窗元件中執行mounted鉤子，將資料初始化，等取消關閉彈窗後，發現mounted鉤子不執行

原因：在vue的生命週期中，在頁面初始化的時候mounted只會執行一次，關閉彈窗頁面並沒有銷燬，所以不會再次執行

<select-experience-group 
:trialMoneyRecordID=trialMoneyRecordID 
:showExperienceGroup='showExperienceGroup' 
@closeCover="handleExperienceGroup">
</select-experience-group>

解決辦法：就是隱藏dialog的時候要銷燬這個dialog。給dialog加v-if，在關閉dialog的時候將v-if設定為false這樣會直接將其從DOM結構中抹除，到此問題解決。

修改後程式碼：

<select-experience-group 
:trialMoneyRecordID=trialMoneyRecordID 
:showExperienceGroup='showExperienceGroup' 
v-if="showExperienceGroup" //利用v-if對頁面進行銷燬
@closeCover="handleExperienceGroup">
</select-experience-group>

補充知識：vue element-ui Dialog對話方塊關閉後重新開啟資料不清空

重置表單的方法

this.$refs[formRef].resetFields();

不是表單中的資料，也需要重置

this.$data = this.$options.data();

以上這篇Vue中關閉彈窗元件時銷燬並隱藏操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。