keep-alive
在动态组件中切换组件时会将之前的组件销毁,切换回来时组件会被重新创建,因此该组件的状态和数据就会丢失。
在组件外嵌套一个keep-alive标签可以防止组件被摧毁:
<keep-alive>
<component :is="currentTab"
name="sk"
:age="18"
@pageClick="pageClick"></component>
</keep-alive>
keep-alive有三个属性可以用:include是指哪些组件需要被keep alive,exclude是指不需要的组件,max指明缓存组件的最大数量,替换策略是LRU。
以include为例:
<keep-alive include="home,about">
<component :is="currentTab"
name="sk"
:age="18"
@pageClick="pageClick"></component>
</keep-alive>
include后面可以跟组件名,该组件名必须得在组件中用name属性声明:
// Home.vue
<script>
export default {
name: "home",
}
</script>
也可以用v-bind:+正则表达式或数组。