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