Question

我有一个使用v-for呈现的组件列表。并非所有组件都同时显示。我使用slice来分页呈现的组件数组。

这些组件不应该被重新呈现，因为其中一些组件具有用户输入的数据，其中一些组件执行与网络相关的任务。

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

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

如何保持动态的组件列表？

Answer 1

在小提琴中测试上面的答案并且不起作用。 https://jsfiddle.net/z11fe07p/680/

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

此外，我会避免使用vue保留字，例如components，因为vue实例中有一个components键，用于说明实例正在使用的组件。

Answer 2

Vue上有关于您的用例的说明

注意，<keep-alive>是针对直接拥有一个的情况而设计的正在切换的子组件。如果你有，它不起作用在里面v-for。当有多个有条件的孩子时，如上面，`要求只有一个孩子在一个孩子时间。

https://vuejs.org/v2/api/#keep-alive

请尝试使用v-once指令。

https://vuejs.org/v2/api/#v-once

Answer 3

我阅读了Vue的DD的源代码，并创建了一个新的组件，该组件与list配合得很好。

程序包名称为<keep-alive>。这是一个链接，https://www.npmjs.com/package/vue-keep-alive-global

使用方法：

vue-keep-alive-global

使用数组

<KeepAliveGlobal>
    <YourComponent
        :key="uniqueKey"
    />
</KeepAliveGlobal>

KeepAliveGlobal将按键缓存组件。

Answer 4

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

以上对我有用。将元素正确推入compList会创建它们各自组件的新实例。在数组内移动元素索引（保持键）不会调用destroy / create并保持每个组件内的状态

在Vue中保持列表组件的活动

4 个答案: