include
定义要缓存的组件名。注意,不是引入的别称,就是组件的文件名exclude
定义不缓存的组件名。一样的,这里是组件的文件名max
最多缓存多少个组件。如果组件个数大于max,会自动剔除掉不常用的- 使用keep-alive后会增加两个生命周期:
onDeactivated
、onActivated
(在子组件内使用)
html
<template>
<div class="yyx-box">
<el-button type="primary" @click="change">切换组件</el-button>
<!-- include定义要缓存的组件名。注意,不是引入的别称,就是组件的文件名 -->
<!-- exclude定义不缓存的组件名。一样的,这里是组件的文件名 -->
<!-- max最多缓存多少个组件。如果组件个数大于max,会自动剔除掉不常用的 -->
<!-- 使用keep-alive后会增加两个生命周期:onDeactivated、onActivated(在子组件内使用) -->
<keep-alive :include="['test1','test2']" :exclude="['test2']" :max="1">
<Test1 v-if="flag"></Test1>
<Test2 v-else></Test2>
</keep-alive>
</div>
</template>
<script setup lang='ts'>
import { ref } from 'vue'
import Test1 from '../components/test1.vue';
import Test2 from '../components/test2.vue';
let flag = ref<boolean>(true)
const change = ()=>{
flag.value = !flag.value
}
</script>
<style scoped lang='scss'>
@include b(box){
height: 100%;
overflow: auto;
}
</style>