Vue - keep-alive 动态组件标签

最新推荐文章于 2024-07-04 11:43:19 发布

策码奔腾---嘚驾~

最新推荐文章于 2024-07-04 11:43:19 发布

阅读量135

点赞数

文章标签： vue.js html5 javascript

本文链接：https://blog.csdn.net/qq_42489210/article/details/119990487

版权

案例1：Tabs 切换卡

keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。它是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。

<!--代码演示--> 
<el-tabs v-model="activeTab">
  <el-tab-pane label="简介及公告" name="announcement">
    <announcement />
  </el-tab-pane>
  <el-tab-pane label="资讯" name="information">
    <keep-alive>
      <information v-if="activeTab=='information'" />
    </keep-alive>
  </el-tab-pane>
  <el-tab-pane label="直播流配置" name="stream">
    <keep-alive>
      <stream v-if="activeTab=='stream'" />
    </keep-alive>
  </el-tab-pane>
</el-tabs>



<!--方法就是使用keep-alive标签将元素包裹起来就可以了-->
<keep-alive></keep-alive>