今天收到一个需求,在vue3写的动态组件条件下,要对指定的几个vue组件进行缓存。
我们用到了keep-live+component标签进行动态的渲染
可以通过exclude(排除)和include(包含)来进行指定缓存
<el-tabs v-model="activeName" type="card" @tab-click="handleTabs" class="groupCard"><el-tab-pane v-for="(v, i) in tabList" :key="i" :label="v.label" :name="v.name"><keep-alive :exclude="['comA','comB','comC']"><component:is="v.cpt"/></keep-alive></el-tab-pane></el-tabs>
要注意!此处的comA,要与组件的name对应
<script setup lang="ts">defineOptions({ name: 'comA' })
</script>