Vue2.0开发之——动态组件-keep-alive组件的include和exclude属性(56)

发表于 分类于 ， ， 阅读时长 ≈ 1 分钟

一 概述

  • 使用keep-alive默认缓存
  • keep-alive组件的include属性
  • keep-alive组件的exclude属性

二 使用keep-alive默认缓存—默认缓存所有组件

显示右侧时缓存Left 显示左侧时缓存Right

三 keep-alive组件的include属性

3.1 使用说明

include属性用来指定：只有名称匹配的组件会被缓存。多个组件名之间使用英文的逗号分隔。

3.2 示例代码-缓存Left

App.vue中示例代码

1
2
3
<keep-alive include="Left">
       <component :is="comName"></component>
</keep-alive>

3.3 效果图-include-left

显示右侧时缓存Left 显示左侧时不缓存Right

四 keep-alive组件的exclude属性

4.1 使用说明

  • include属性和exclude属性只能保留其一，不能同时存在
  • exclude属性指定哪些组件需要被缓存
  • exclude属性指定哪些组件不需要被缓存

4.2 示例代码—不缓存Right

1
2
3
<keep-alive exclude="Right">
        <component :is="comName"></component>
</keep-alive>

4.3 效果图

同上