关于在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>
相关推荐
晴殇i2 分钟前
Vue i18n插件:实现Web应用多语言切换的
前端·javascript·vue.js
玲小珑8 分钟前
35+前端工程师的年中失业
前端·年终总结
GDAL10 分钟前
HTML 树结构(DOM)深入讲解教程
前端·html
奈斯啊奈斯_10 分钟前
前端解决浏览器版本延迟问题(webpack)
前端·javascript
bug爱好者19 分钟前
原生小程序如何实现Table表格功能
前端·javascript·面试
青梅主码26 分钟前
从全大写到驼峰:程序员必会的 6 种英文字母大小写转换场景!
前端·后端·敏捷开发
蓝易云31 分钟前
精选HTML、JavaScript、ASP代码片段集锦
前端·后端·html
難釋懷32 分钟前
TypeScript类
前端·typescript
泉城老铁33 分钟前
springboot+vue实现快速文件上传详细指南
vue.js·后端·架构
小码编匠35 分钟前
一款开源多功能文档在线预览解决方案,支持主流格式一键部署
vue.js·spring boot·后端