Vue.js - 删除从 keep-alive 加载的子组件

Posted 2023-02-22

【中文标题】Vue.js - 删除从 keep-alive 加载的子组件

【英文标题】：Vue.js - Remove a child component loaded from keep-alive

【发布时间】：2021-07-14 17:26:41

【问题描述】：

我的问题与此处列出的问题类似： Vue.js - Destroy a cached component from keep alive

我还在使用 Vue 路由器创建一种选项卡系统，因此代码如下所示：

//My Tab component 
<template>
  <tab>
    <tab-selector />
    <keep-alive>
      <router-view />
      <!-- This router view is used to render one of the childRoutes of the main TabRoute -->
    </keep-alive> 
  </tab>
</template>

<script>
 handleTabClose() 
   //Close tab logic
   this.$destroy(); 
   //Insert router push to be one of the other tabs that have not been closed.
 
</script>

vue-router 使用的路由大致如下：

    
        path: "/tab",
        name: "TabComponent",
        component: () => import("InsertComponentPath"),
        children: [TabRoute1, TabRoute2, TabRoute3]
    ,

Keep alive 用于在切换选项卡（切换子路由）时保持状态。

我想在关闭选项卡时从缓存中删除 childRoute/Component，但在我的选项卡组件中使用 this.$destroy 似乎正在破坏整个选项卡组件，而不是其中的子组件。

此问题和其他堆栈溢出问题中也说明的 V-if 解决方案将不起作用，因为我只想从内存中删除此特定选项卡，这会删除所有选项卡。

感谢您的帮助。

【问题讨论】：

我能问一下为什么吗？如果我们知道您为什么要从缓存中“删除”组件，则可能还有另一种解决方案。

@tauzN 抱歉回复晚了，原因是在某些情况下，当标签页关闭并再次打开时，它会以与关闭时相同的状态打开，但理想情况下我们希望它打开像以前一样新鲜。

你能在codepen或codesandbox上准备一些示例代码吗？

【参考方案1】：

在使用父组件和子组件时，我几乎总是必须使用 vuex 来更新链进程，以防止更新页面上呈现的任何底层组件。

对 Vuex 进行更新后，我通常会在上下文中更新组件的 key 以重新渲染它。

在大多数情况下，Vuex 似乎可以解决状态管理问题，之后您就不必使用keep-alive。

它总能解决问题。如果我了解您的问题，我希望这可以帮助您。

如果我误解了，请评论，我会删除它。

【参考方案2】：

你为什么不从应该自动更新你的组件的路由器中删除孩子你可以试试router.replaceRoutes(routes)

【参考方案3】：

我在keep-Alive https://vuejs.org/v2/api/#keep-alive 中找到了使用include 参数的解决方案

我使用router.getmatchedcomponents() 保留了一组当前活动的选项卡，以获取当前打开的选项卡的组件名称。

然后在我的handleClose() 函数中，我从include 数组中删除已关闭的选项卡。

最终实现看起来有点像这样：

//My Tab component 
<template>
  <tab>
    <tab-selector />
    <keep-alive :include="cacheArr">
      <router-view />
      <!-- This router view is used to render one of the childRoutes of the main TabRoute -->
    </keep-alive> 
  </tab>
</template>

<script>
 private cacheArr = []

//Called whenever a new tab is opened
 handleOpen() 
   //Add current Tab to this.cachArr
   this.cachArr.push(router.getmatchedcomponents().pop().name);
 

//Called whenever new tab is closed.
 handleTabClose(name) 
   //Close tab logic
   
   //Remove Tab being closed from this.cacheArr
   this.cacheArr.splice(this.cacheArr.indexOf(name), 1);
 
</script>

【参考方案4】：

deactivated() 
    this.$destroy();
,

在子组件中工作得很好。

【讨论】：

不，这也会在切换选项卡时破坏选项卡，而不是在关闭选项卡时！