Vue中關(guān)閉彈窗組件時(shí)銷毀并隱藏操作
更新時(shí)間：2020年09月01日 09:11:49 作者：YoungShiHao
這篇文章主要介紹了Vue中關(guān)閉彈窗組件時(shí)銷毀并隱藏操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
背景：在dialog彈窗組件中執(zhí)行mounted鉤子，將數(shù)據(jù)初始化，等取消關(guān)閉彈窗后，發(fā)現(xiàn)mounted鉤子不執(zhí)行
原因：在vue的生命周期中，在頁(yè)面初始化的時(shí)候mounted只會(huì)執(zhí)行一次，關(guān)閉彈窗頁(yè)面并沒有銷毀，所以不會(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ì)頁(yè)面進(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í)銷毀并隱藏操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了如何獲取this.$store.dispatch的返回值問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue-axios-post數(shù)據(jù)后端接不到問題解決
這篇文章主要介紹了Vue-axios-post數(shù)據(jù)后端接不到問題解決，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
這篇文章主要為大家介紹了詳解?Vue虛擬DOM如何提高前端開發(fā)效率,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-12-12
Vue3.2?新增指令?v-memo?用法詳解(提高性能利器)
v-memo 接受一個(gè)依賴的數(shù)組，依賴的數(shù)組變化，v-memo 所對(duì)應(yīng)的 DOM 包括子集將會(huì)重新渲染，這篇文章主要介紹了Vue3.2?新增指令?v-memo?用法，提高性能的又一利器,需要的朋友可以參考下2022-09-09
跨域，跨的是不同域，也就是協(xié)議或主機(jī)或或端口號(hào)不同造成的現(xiàn)象，本文給大家分享vue3解決跨域問題詳細(xì)代碼親測(cè)有效，感興趣的朋友跟隨小編一起看看吧2022-11-11
vue 的keep-alive緩存功能的實(shí)現(xiàn)
本篇文章主要介紹了vue 的keep-alive緩存功能的實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了vue 如何使用遞歸組件，幫助大家更好的理解和使用vue，完成開發(fā)需求，感興趣的朋友可以了解下2020-10-10
這篇文章主要為大家詳細(xì)介紹了vue中SPA單頁(yè)面應(yīng)用程序的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要介紹了Vue數(shù)據(jù)雙向綁定原理實(shí)例解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
vue-cli3項(xiàng)目生產(chǎn)和測(cè)試環(huán)境分包后文件名和數(shù)量不一致解決
這篇文章主要為大家介紹了vue-cli3項(xiàng)目生產(chǎn)和測(cè)試環(huán)境分包后文件名和數(shù)量不一致解決方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05