关于在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>
相关推荐
搏博22 分钟前
基于Vue.js的图书管理系统前端界面设计
前端·javascript·vue.js·前端框架·数据可视化
掘金安东尼41 分钟前
前端周刊第419期(2025年6月16日–6月22日)
前端·javascript·面试
bemyrunningdog1 小时前
AntDesignPro前后端权限按钮系统实现
前端
重阳微噪1 小时前
Data Config Admin - 优雅的管理配置文件
前端
Hilaku1 小时前
20MB 的字体文件太大了,我们把 Icon Font 压成了 10KB
前端·javascript·css
fs哆哆1 小时前
在VB.net中,文本插入的几个自定义函数
服务器·前端·javascript·html·.net
专注VB编程开发20年1 小时前
C# .NET多线程异步记录日声,队列LOG
java·开发语言·前端·数据库·c#
慧慧吖@1 小时前
箭头函数的this指向
开发语言·前端·javascript
锈儿海老师1 小时前
关于平凡AI 提示词造就世界最强ast-grep 规则这件事
前端·javascript·人工智能
开开心心就好1 小时前
高效批量转换Word到PDF的方法
javascript·安全·智能手机·pdf·word·objective-c·lisp