keep-alive解决二级页面数据不清空问题

Faith_ZL

于 2023-04-12 10:07:58 发布

阅读量148

点赞数

文章标签：前端 vue

本文链接：https://blog.csdn.net/qq_43575827/article/details/130099964

版权

文章讨论了在项目中遇到的二级页面数据在提交后未清空的问题，原因在于二级页面没有重新加载，onMouted生命周期方法只执行一次。解决方案是确保在二级页面打开时重新执行生命周期，例如在组件的show属性改变时。示例代码展示了如何在Vue组件中实现这一操作，利用<keep-alive>和v-if来控制页面的状态。

摘要由CSDN通过智能技术生成

二级页面数据不清空

做项目提交表格的时候提交完重新打开二级页面数据没有清空，
在这里插入图片描述

为什么会出现这问题，是因为二级页面在二次被打开的时候没有被重新加载，onMoubted只在以及页面执行一次，二级页面执行一次，二级页面关闭后重新打开并没有重新加在，只是页面的显示隐藏状态被修改了，想解决此类问题的一个方法就是在页面打开后让二级页面重新执行一下生命周期。

<my-window
    ref="addModify"
    :title="title"
    :show="popShow"
    :full="false"
    :customFooter="false"
    @handleOk="add()"
    @close="LOSEDIA()"
    :customClass="'diaBodyNotFull'"
  >
    <template #custom>
      <keep-alive>
      <div class="popInfo" v-if="popShow">
      </div>
    </keep-alive>
    </template>
  </my-window>

这样就解决问题了。