如何在 Vue 中创建具有相同名称的 keep-alive 组件？

Question

我有一个用 v-for 渲染的 div 列表。 单击其中一个 div 时，将打开一个模式，显示有关该 div 的更多信息。

<PlayerModal :player="selectedPlayer" />

<div v-for="player in players" ...>
    <div @click="openModal(player)">
        {{ player.name }}
    </div>
    ...
</div>

模态通过获取请求收集附加信息并在模态打开时显示信息。 我想保存此信息，以便在关闭并重新打开模式时，信息将被缓存。 我想我可以用一个keep-alive标签来做到这一点。 但我不知道，当单个模态组件动态呈现来自不同 div 的信息时。

我在想我可以为每个 div 渲染一个模态组件，这样每个模态都会有其单独的 keep-alive 标记。 但是模态组件都将具有相同的名称，所以我不知道如何激活或停用单独的组件。

<div v-for="player in players">
    <keep-alive>
        <PlayerModal :player="player" :is=" ??? " />
    </keep-alive>
</div>

任何帮助表示赞赏！ 谢谢！

Answer 1

只需向动态组件添加一个键

<div v-for="player in players">
   <div @click="openModal(player)">
       {{ player.name }}
   </div>
</div>
<keep-alive max="10">
    <component :player="selectedPlayer" :is="PlayerModal" :key="selectedPlayer.id"/>
</keep-alive>

您可以通过查看this.$children和子组件本身的_inactive状态来检查缓存的组件。