Vue3: Using v-for with keep-alive

Question

我的问题

我有一个可变数量的Tab组件；可以有1个或10个，但一次只显示一个。但是，我想在交换机之间缓存它们。我想我可以在<keep-alive>中放入一个v-for循环，但根据文档：https://v3.vuejs.org/api/built-in-components.html#keep-活动：

注意，<keep-alive>是为它有一个正在切换的直接子组件的情况而设计的。如果里面有v-for，它就不起作用。当有多个条件子级时，如上所述，<keep-alive>要求一次只呈现一个子级。

问题

这似乎是一个非常标准的用例，所以我想知道是否有一种我缺少的更简单的方法。是否有在<keep-alive>组件内呈现可变数量组件的最佳实践？

更新：有点像答案

我能够将Tab逻辑与v-for分离，这意味着Tab在其他地方生成，而TabContent是<keep-alive>中唯一的东西。有点像：

<keep-alive>
<TabContent tab-name="name" />
</keep-alive>

然后在内部，TabContent使用tab-name道具来获取所需的数据。

诚然，这感觉是一个很好的解决方案，但我对其他解决方法持开放态度。

更新2.0：对于动态组件，请使用:key

我想明白的最后一件事；我的Tab标题依赖于文件名，TabContent是从文件中生成的，所以它需要filename道具。我的内容是动态的。

您仍然不能在<keep-alive>中使用v-for，但仍然可以使用密钥：

<keep-alive>
<template>
<component
:is="'TabContent'"
:key="currentTabTitle"
v-bind="{
filename: currentTabTitle
}"
/>
</template>
</keep-alive>

Answer 1

使用keep-alive查看动态组件

<div id="dynamic-component-demo" class="demo">
<button
v-for="tab in tabs"
:key="tab"
:class="['tab-button', { active: currentTab === tab }]"
@click="currentTab = tab"
>
{{ tab }}
</button>
<!-- Inactive components will be cached! -->
<keep-alive>
<component :is="currentTabComponent">     </component>
</keep-alive>
</div>