67Vue - 动态组件(keep-alive)
组件 动态 keep alive
2023-09-11 14:15:43 时间
多个组件可以使用同一个挂载点,然后动态地在它们之间切换。使用保留的 <component>
元素,动态地绑定到它的 is
特性:
var vm = new Vue({
el: '#example',
data: {
currentView: 'home'
},
components: {
home: { /* ... */ },
posts: { /* ... */ },
archive: { /* ... */ }
}
})
<component v-bind:is="currentView">
<!-- 组件在 vm.currentview 变化时改变! -->
</component>
也可以直接绑定到组件对象上:
var Home = {
template: '<p>Welcome home!</p>'
}
var vm = new Vue({
el: '#example',
data: {
currentView: Home
}
})
keep-alive
如果把切换出去的组件保留在内存中,可以保留它的状态或避免重新渲染。为此可以添加一个 keep-alive
指令参数:
<keep-alive>
<component :is="currentView">
<!-- 非活动组件将被缓存! -->
</component>
</keep-alive>
相关文章
- SpringCloud微服务:Sentinel哨兵组件,管理服务限流和降级
- vue动态加载组件
- vue组件上动态添加和删除属性
- Flutter移动电商实战 --(6)dio基础_Get_Post请求和动态组件协作
- Vue - v-for 循环渲染多个 “重复“ 子组件(仅 ref 不同,this.$refs.xx 使用时依然能准确找到子组件)将子组件 ref 设为动态,这样每个子组件都是 “独立“ 的!详细教程
- uni-app - v-for 循环渲染多个 “重复“ 子组件(仅 ref 不同,this.$refs.xx 使用时依然能准确找到子组件)将子组件 ref 设为动态,这样每个子组件都是 “独立“ 的!
- [转]extjs组件添加事件监听的三种方式
- Vue 与 动态组件 import 的尝试
- vue-element-admin el-upload组件实现图片上传
- c#引用office组件库迁移源码问题
- 【详细】Android入门到放弃篇-YES OR NO-》各种UI组件,布局管理器,单元Activity
- 封装一个优雅的element ui表格组件
- 【ArkTS】向右看齐--解决Scroll子组件无法默认右对齐的问题
- Vue keep-alive 详细介绍(动态组件、路由组件缓存优化)
- SwiftUI 界面大全之如何判断小组件是否在某个大组件内,实现蒙特卡洛近似Monte Carlo Approximation(教程含源码)
- Flutter 组件之可以缩放和平移的 Flutter 无限画布(教程含源码)
- macOS SwiftUI 核心组件之网格显示Unicode内容LazyGrid (教程含源码)
- SwiftUI 组件之动态验证码组件 captcha(教程含源码)
- vue组件---动态组件&异步组件
- 执行计划组件、组件、老化
- spring mvc环境之数据库ORM组件Mybaits配置(九)
- 详解vue组件的is特性:限制元素&动态组件
- vue中异步组件实现按需加载
- jQuery Easy UI Panel(面板)组件
- Java POI组件——总体概况