vue 动态组件keep-alive

官网https://cn.vuejs.org/v2/guide/components-dynamic-async.html

使用场景

用来缓存组件,避免多次加载相应的组件,减少性能消耗

选项卡的内容如果是个组件。你每次切换新标签的时候，Vue 都创建了一个新的实例。但是我们想要他不从新加载每次保留开始操作的状态。组件实例能够被在它们第一次被创建的时候缓存下来。

比如在选项卡一里面我修改了单选框性别的选择由默认的男选择了女。当我切换选项卡二再回到选项卡一的时候我希望我仍然选择的是女。而不是从新加载的默认值男。

子组件prince，rose，fox里面的内容可以随便写。我为了验证是否组件内容会被缓存。在prince里面写了

事实证明我点了下拉和性别的单选框切换走了再回来还是显示我原来选择的内容的。

注意：这是用来缓存组件的。组件组件。。。。件。

-------------------------------------------------------------------------------

上面的例子是所有的组件都缓存了。但是如果希望有点组件缓存，有的组件不缓存应该怎么处理呢？？

include 。 exclude和keep alive连用

include  代表这些页面缓存

exclude 这些页面不缓存

:is="currentTab">

代表name（export default里面设置name）是prince和fox的页面要缓存。

注意：

给每个子组件加一个name的属性。不是在router里面加name。而是直接再页面的export default里面设置name。这个name就对应include里面的那个。。

每个引进的子组件页面都要加name，而不是你需要那个才加那个。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！