关于在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>
相关推荐
wordbaby26 分钟前
Flutter Form Builder 完全指南:告别 Controller 地狱
前端·flutter
A***071738 分钟前
React数据可视化应用
前端·react.js·信息可视化
泉城老铁1 小时前
Vue2实现语音报警
前端·vue.js·架构
q***04051 小时前
Vue项目中 安装及使用Sass(scss)
vue.js·sass·scss
临江仙4552 小时前
前端骚操作:用户还在摸鱼,新版本已悄悄上线!一招实现无感知版本更新通知
前端·vue.js
想个什么名好呢2 小时前
解决uniapp的H5项目uni-popup页面滚动穿透bug
前端
用户93816912553602 小时前
Vue3项目--mock数据
前端
前端加油站2 小时前
一种新HTML 页面转换成 PDF 技术方案
前端·javascript·vue.js
w***Q3502 小时前
Vue打包
前端·javascript·vue.js
有事没事实验室2 小时前
router-link的custom模式
前端·javascript·vue.js