背景：在dialog彈窗組件中執(zhí)行mounted鉤子，將數(shù)據(jù)初始化，等取消關(guān)閉彈窗后，發(fā)現(xiàn)mounted鉤子不執(zhí)行

原因：在vue的生命周期中，在頁(yè)面初始化的時(shí)候mounted只會(huì)執(zhí)行一次，關(guān)閉彈窗頁(yè)面并沒(méi)有銷(xiāo)毀，所以不會(huì)再次執(zhí)行

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

解決辦法：就是隱藏dialog的時(shí)候要銷(xiāo)毀這個(gè)dialog。給dialog加v-if，在關(guān)閉dialog的時(shí)候?qū)-if設(shè)置為false這樣會(huì)直接將其從DOM結(jié)構(gòu)中抹除，到此問(wèn)題解決。

修改后代碼：

<select-experience-group :trialMoneyRecordID=trialMoneyRecordID :showExperienceGroup=’showExperienceGroup’ v-if='showExperienceGroup' //利用v-if對(duì)頁(yè)面進(jìn)行銷(xiāo)毀@closeCover='handleExperienceGroup'></select-experience-group>

補(bǔ)充知識(shí)：vue element-ui Dialog對(duì)話框關(guān)閉后重新打開(kāi)數(shù)據(jù)不清空

重置表單的方法

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

不是表單中的數(shù)據(jù)，也需要重置

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

以上這篇Vue中關(guān)閉彈窗組件時(shí)銷(xiāo)毀并隱藏操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。