幽灵资源网 Design By www.bzswh.com
背景：在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,关闭弹窗,销毁,隐藏
幽灵资源网 Design By www.bzswh.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
幽灵资源网 Design By www.bzswh.com
暂无评论...