概述
背景：在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中关闭弹窗组件时销毁并隐藏操作的全部内容，希望文章能够帮你解决Vue中关闭弹窗组件时销毁并隐藏操作所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复