关于在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>
相关推荐
胡斌附体2 分钟前
vue组件和插件的区别
vue.js·组件·插件·vue.component·vue.use
GISer_Jing5 分钟前
前端工程化 Source Map(源码映射)详解
前端·webpack
layman05287 分钟前
Vue中的 VueComponent
前端·javascript·vue.js
mqiqe22 分钟前
vue发版html 生成打包到docker镜像进行发版
vue.js·docker·html
水星灭绝1 小时前
HTML 计算网页的PPI
前端·javascript·html
码上飞扬2 小时前
JavaScript性能优化实战
开发语言·javascript·性能优化
未来之窗软件服务2 小时前
JavaScript性能优化实战的技术文-——仙盟创梦IDE
开发语言·javascript·ecmascript·代码优化·仙盟创梦ide
恶龙呼呼2 小时前
xhr、fetch和axios
前端
sunbyte4 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | Split Landing Page(拆分展示页)
前端·javascript·css·vue·tailwindcss
疯狂的沙粒4 小时前
React与Vue的内置指令对比
开发语言·前端·javascript·vue.js