关于在vue3中使用keep-live+component标签组合,实现对指定某些组件进行缓存或不缓存的问题

今天收到一个需求,在vue3写的动态组件条件下,要对指定的几个vue组件进行缓存。

我们用到了keep-live+component标签进行动态的渲染

可以通过exclude(排除)和include(包含)来进行指定缓存

html 复制代码
<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对应

TypeScript 复制代码
<script setup lang="ts">
    defineOptions({ name: 'comA' })
</script>
相关推荐
Serendipity-Solitude9 小时前
使用HTML创建井字棋
前端·html
Aotman_10 小时前
JS 按照数组顺序对对象进行排序
开发语言·前端·javascript·vue.js·ui·ecmascript
Hi_kenyon18 小时前
VUE3套用组件库快速开发(以Element Plus为例)二
开发语言·前端·javascript·vue.js
Irene199118 小时前
Vue 3 响应式系统类型关系总结(附:computed、props)
vue.js·props·响应式类型
起名时在学Aiifox18 小时前
Vue 3 响应式缓存策略:从页面状态追踪到智能数据管理
前端·vue.js·缓存
天若有情67318 小时前
校园二手交易系统实战开发全记录(vue+SpringBoot+MySQL)
vue.js·spring boot·mysql
计算机程序设计小李同学19 小时前
个人数据管理系统
java·vue.js·spring boot·后端·web安全
李剑一19 小时前
uni-app实现本地MQTT连接
前端·trae
EndingCoder19 小时前
Any、Unknown 和 Void:特殊类型的用法
前端·javascript·typescript