关于在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>
相关推荐
摹客4 分钟前
【3D设计】界面设计中的3D元素:应用场景+5款工具横评(含Three.js)
前端
Hilaku8 分钟前
CORS 到底在保护谁?90% 的前端理解错了跨域的本质
前端·javascript·程序员
华玥作者8 分钟前
Vue 3 + TypeScript + uni-app 组件库推荐:hy-app(华玥组件库)
vue.js·typescript·uni-app
wno70421 分钟前
node.js中使用jquery
前端·node.js·jquery
阿琳a_26 分钟前
b-map-viewer:面向 Vue 3 的地图可视化 SDK,从接入到展示再到交互分析
前端·javascript·vue.js·gis·数据可视化·地图
10年前端老司机36 分钟前
Agent 商业化困局:热闹的发布会,冷清的付费客户
前端·后端·agent
钱栈up43 分钟前
热榜上手|HyperFrames:写HTML出MP4
前端·html
Sailing1 小时前
🚀🚀【封闭结束8】Agent RAG:从零搭建一个可用知识库
前端·后端·agent
Captain1314_李祖团1 小时前
5. MLIR相关语法
java·前端·javascript
齐 飞1 小时前
VUE2常用语法总结
javascript·vue.js