案例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>