Vue中关闭弹窗组件时销毁并隐藏操作
更新时间：2020年09月01日 09:11:49 作者：YoungShiHao
这篇文章主要介绍了Vue中关闭弹窗组件时销毁并隐藏操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
背景：在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中关闭弹窗组件时销毁并隐藏操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue element-ui Radio单选框默认值选不中的原因:混用字符和数字问题
这篇文章主要介绍了vue element-ui Radio单选框默认值选不中的原因:混用字符和数字问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-12-12
element表格翻页第2页从1开始编号(后端从0开始分页)
这篇文章主要介绍了element表格翻页第2页从1开始编号(后端从0开始分页)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
这篇文章主要介绍了vue实现百度搜索下拉提示功能实例,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
这篇文章主要介绍了Vue弹窗的两种实现方式,一种使用.sync修饰符另一种使用v-model，本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2022-08-08
vue3中使用highlight.js实现代码高亮显示的代码示例
代码高亮是在网页开发中常见的需求之一,它可以使代码在页面上以不同的颜色或样式进行突出显示提高可读性,这篇文章主要介绍了vue3中使用highlight.js实现代码高亮显示的相关资料,需要的朋友可以参考下2025-04-04
在本文中我们给大家整理了一篇关于Vue表单控件绑定的相关知识点内容，有需要的朋友们参考下。2019-02-02
这篇文章主要为大家介绍了富文本编辑器quill.js开发之自定义格式扩展,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
这篇文章主要介为大家详细绍了vue微信分享插件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
这篇文章主要介绍了Vue.js实现简单ToDoList的前期准备,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
本篇文章介绍了如何使用 Vue3 实现一个鼠标经过显示按钮的效果,我们使用了 Vue3 的 Composition API 来创建响应式的数据,并使用了 @mouseover 和 @mouseleave 事件来监听鼠标的移入和移出事件,感兴趣的朋友一起看看吧2024-04-04
最新评论