vue.js - 使列表组件在 Vue 中保持事件状态

Question

我有一个使用 v-for 渲染的组件列表.并非所有组件都同时显示。我使用 slice 对渲染组件数组进行分页。 .

不应重新渲染这些组件，因为它们中的一些具有用户输入的数据，而其中一些执行与网络相关的任务。

我尝试使用 <keep-alive> .但是，这只会呈现第一个组件。

<keep-alive>
    <component :is="component.type" :key="component.id" v-for="component in components">
</keep-alive>

如何使动态组件列表保持事件状态？

Answer 1

 <div v-for="comp in compList"  :key="'container'+comp.keyId" >
    <keep-alive>
      <component :is="comp.type" :key="comp.keyId"></component>
    </keep-alive>
 </div>

以上对我有用。正确地将元素推送到 compList 会创建其各自组件的新实例。在数组中移动元素的索引，维护键，不调用销毁/创建并维护每个组件内的状态