keep-alive 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。 它是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。
tabs:
在做tab切换的时候,我没一个tab项都是一个组件,刚加载第一个tab项的时候就把其他tab项的mounted内容加载出来了,所以用到懒加载,看文档没有相关的懒加载,后来用的是路由懒加载不可以,然后想的是监听tab切换的事件,切换到哪哪里显示,显然更不可以,因为首次切换可以显示,但是你如果下次再切换会一直请求,后来尝试在tab标签里面写lazy就解决了这个问题.代码如下
<el-tabs v-model="activeName" type="card"> <el-tab-pane label="日报" name="first" lazy> <day-report/> </el-tab-pane> <el-tab-pane label="月报" name="second" lazy> <month-report/> </el-tab-pane> <el-tab-pane label="专题报告" name="third" lazy> <project-report/> </el-tab-pane> </el-tabs>
我查看其他的也有相关方法,没有试验,先记录一下
tab在后台项目中也比较常用的。假设我们有四个tab选项,每个tab都会向后端请求数据,但我们希望一开始只会请求当前的tab数据,而且tab来回切换的时候不会重复请求,只会实例化一次。首先我们想到的就是用
v-if
这样的确能做到一开始不会挂载后面的tab,但有一个问题,每次点击这个tab组件都会重新挂载一次,这是我们不想看到的,这时候我们就可以用到<keep-alive>
了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>