Vue中關(guān)閉彈窗組件時(shí)銷毀并隱藏操作
背景：在dialog彈窗組件中執(zhí)行mounted鉤子，將數(shù)據(jù)初始化，等取消關(guān)閉彈窗后，發(fā)現(xiàn)mounted鉤子不執(zhí)行
原因：在vue的生命周期中，在頁面初始化的時(shí)候mounted只會(huì)執(zhí)行一次，關(guān)閉彈窗頁面并沒有銷毀，所以不會(huì)再次執(zhí)行
<select-experience-group :trialMoneyRecordID=trialMoneyRecordID :showExperienceGroup='showExperienceGroup' @closeCover="handleExperienceGroup"> </select-experience-group>
解決辦法：就是隱藏dialog的時(shí)候要銷毀這個(gè)dialog。給dialog加v-if，在關(guān)閉dialog的時(shí)候?qū)-if設(shè)置為false這樣會(huì)直接將其從DOM結(jié)構(gòu)中抹除，到此問題解決。
修改后代碼：
<select-experience-group :trialMoneyRecordID=trialMoneyRecordID :showExperienceGroup='showExperienceGroup' v-if="showExperienceGroup" //利用v-if對(duì)頁面進(jìn)行銷毀 @closeCover="handleExperienceGroup"> </select-experience-group>
補(bǔ)充知識(shí)：vue element-ui Dialog對(duì)話框關(guān)閉后重新打開數(shù)據(jù)不清空
重置表單的方法
this.$refs[formRef].resetFields();
不是表單中的數(shù)據(jù)，也需要重置
this.$data = this.$options.data();
以上這篇Vue中關(guān)閉彈窗組件時(shí)銷毀并隱藏操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue?element-ui?Radio單選框默認(rèn)值選不中的原因:混用字符和數(shù)字問題
這篇文章主要介紹了vue?element-ui?Radio單選框默認(rèn)值選不中的原因:混用字符和數(shù)字問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
element表格翻頁第2頁從1開始編號(hào)(后端從0開始分頁)
這篇文章主要介紹了element表格翻頁第2頁從1開始編號(hào)(后端從0開始分頁)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
vue實(shí)現(xiàn)百度搜索下拉提示功能實(shí)例
這篇文章主要介紹了vue實(shí)現(xiàn)百度搜索下拉提示功能實(shí)例,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
Vue彈窗的兩種實(shí)現(xiàn)方式實(shí)例詳解
這篇文章主要介紹了Vue彈窗的兩種實(shí)現(xiàn)方式,一種使用.sync修飾符另一種使用v-model，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-08-08
vue3中使用highlight.js實(shí)現(xiàn)代碼高亮顯示的代碼示例
代碼高亮是在網(wǎng)頁開發(fā)中常見的需求之一,它可以使代碼在頁面上以不同的顏色或樣式進(jìn)行突出顯示提高可讀性,這篇文章主要介紹了vue3中使用highlight.js實(shí)現(xiàn)代碼高亮顯示的相關(guān)資料,需要的朋友可以參考下2025-04-04
在本文中我們給大家整理了一篇關(guān)于Vue表單控件綁定的相關(guān)知識(shí)點(diǎn)內(nèi)容，有需要的朋友們參考下。2019-02-02
富文本編輯器quill.js開發(fā)之自定義格式擴(kuò)展
這篇文章主要為大家介紹了富文本編輯器quill.js開發(fā)之自定義格式擴(kuò)展,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
這篇文章主要介為大家詳細(xì)紹了vue微信分享插件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
Vue.js實(shí)現(xiàn)簡單ToDoList 前期準(zhǔn)備（一）
這篇文章主要介紹了Vue.js實(shí)現(xiàn)簡單ToDoList的前期準(zhǔn)備,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
vue3鼠標(biāo)經(jīng)過顯示按鈕功能的實(shí)現(xiàn)
本篇文章介紹了如何使用 Vue3 實(shí)現(xiàn)一個(gè)鼠標(biāo)經(jīng)過顯示按鈕的效果,我們使用了 Vue3 的 Composition API 來創(chuàng)建響應(yīng)式的數(shù)據(jù),并使用了?@mouseover?和?@mouseleave?事件來監(jiān)聽鼠標(biāo)的移入和移出事件,感興趣的朋友一起看看吧2024-04-04