关于在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>
相关推荐
菠菜盼娣13 小时前
第三方插件 unplugin-icons
前端
敲代码的彭于晏13 小时前
在迁移中学习 React 18:一份来自 React 17 的升级问题清单
前端·react.js
顾安r13 小时前
12.17 脚本工具 自动化全局跳转
linux·前端·css·golang·html
踢球的打工仔13 小时前
jquery的基本使用(2)
前端·javascript·jquery
阿蒙Amon13 小时前
JavaScript学习笔记:16.模块
javascript·笔记·学习
菠菜盼娣13 小时前
Eslint 用法
vue.js
DEMO派14 小时前
前端javascript如何实现阅读位置记忆【可运行源码】
前端
苏打水com14 小时前
第十七篇:Day49-51 前端工程化进阶——从“手动”到“自动化”(对标职场“提效降本”需求)
前端·javascript·css·vue.js·html
文心快码BaiduComate14 小时前
Comate强力赋能:「趣绘像素岛」从体验泥潭到高性能可用的蜕变之路
前端·后端·程序员
『 时光荏苒 』14 小时前
使用Vue播放M3U8视频流的方法
前端·javascript·vue.js