Vue.js - 从保持活动状态销毁缓存的组件 [英] Vue.js - Destroy a cached component from keep alive

问题描述

我的 vue 应用有一个动态标签机制.

My vue app has a dynamic tabs mechanism.

用户可以动态创建任意数量的标签，每个标签都有自己的状态(例如页面").

Users can create as many tabs as the want on the fly, each tab having its own state (eg "Pages").

我正在使用 组件来缓存不同的页面.

I am using the <keep-alive> component to cache the different pages.

<keep-alive include="page">
  <router-view :key="$route.params.id" />
</keep-alive>

但用户也可以关闭"单个标签.由于页面往往存储大量数据，我想从缓存中删除相应的页面组件，当用户关闭标签时.

But users can also "close" individual tab. As pages tend to store a lot of datas, I would like to delete the according page component from the cache, as the user close the tab.

如何以编程方式销毁 keep-alive 中的缓存组件?

How can I programmatically destroy a cached component inside keep-alive ?

推荐答案

您可以在用户关闭选项卡之前调用 this.$destroy() 并删除该选项卡中的所有数据和事件绑定.

You can call this.$destroy() before user close the tab and delete all of data and event binding in that one.

这篇关于Vue.js - 从保持活动状态销毁缓存的组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！