Vue学习（动态组件、组件路由缓存keepalive）-学习笔记

文章目录

Vue学习（动态组件、组件路由缓存keepalive）-学习笔记
- 动态组件
- 组件路由缓存keepalive

Vue学习（动态组件、组件路由缓存keepalive）-学习笔记

动态组件

<template>
<div><button @click="flag='testA'">testA</button><button @click="flag='testB'">testB</button><button @click="flag='testC'">testC</button><!-- <testA  v-if="flag=='testA'"/><testB v-if="flag=='testB'"/> --><!-- 动态组件  flag的值与组件的名称相匹配--><component :is="flag"></component>
</div>
</template><script>
import testA from './testA.vue'
import testB from './testB.vue'export default {name:'',data(){return{flag:'testA'}},components:{testA,testB}
}
</script>

组件路由缓存keepalive

<template>
<div><button @click="flag='testA'" :class="flag=='testA'?'active':''">testA</button><button @click="flag='testB'"  :class="flag=='testB'?'active':''">testB</button><button @click="flag='testC'"  :class="flag=='testC'?'active':''">testC</button><!-- <testA  v-if="flag=='testA'"/><testB v-if="flag=='testB'"/> --><!-- 动态组件  flag的值与组件的名称相匹配--><!-- keep-alive  抽象组件  用于对组件进行缓存 --><!-- include:只有匹配的组件才会缓存 （可写正则表达式） --><!-- exclude:任何组件不会缓存 --><keep-alive include="testA"><component :is="flag"></component></keep-alive><!-- 组件testA、testC缓存 --><!-- <keep-alive include="testA,testC"><component :is="flag"></component></keep-alive>--><!-- 除了组件testA、testC缓存 --><!-- <keep-alive exclude="testA,testC"><component :is="flag"></component></keep-alive>-->
</div> </template><script>
import testA from './testA.vue'
import testB from './testB.vue'export default {name:'',data(){return{flag:'testA'}},components:{testA,testB}
}
</script><style scoped>
@import '../../assets/css/table.css';
.active {background:#f00;
}
</style>

<template>
<div>testA组件：{{title}}
</div>
</template><script>
export default {name:'',data(){return{title:Math.random()}}
}
</script>

<template>
<div>testB组件：<input type="text" v-model="title" />
</div>
</template><script>
export default {name:'',data(){return{title:Math.random()}}
}
</script>

Vue学习（动态组件、组件路由缓存keepalive）-学习笔记相关推荐

vue路由缓存keepAlive导致echarts图表100px偶现
项目里有一个页面用了路由缓存 // 路由文件 {path: '/test',name: 'test',component: () => import('@/views/index.vue'),m ...
【Vue】动态添加组件的两种实现
在Vue项目中,想要动态为页面上添加组件,是一件十分容易就能够实现的事情,这必须要得益于Vue框架的强力支持! 但有时候往往就是由于事情变得简单起来后,却突然忘记了要如何去实现.这大概就是对代码走火入 ...
vue暂存功能_vue路由缓存的几种实现方式小结
本文实例讲述了vue路由缓存的几种实现方式.分享给大家供大家参考,具体如下: 在我们的日常开发中,有时候会遇到页面的缓存,特别是电商的项目,在商品列表的一些状态都是要缓存下来的. 下面就简单介绍几种 ...
vue.js 动态添加组件
撸了今年阿里.头条和美团的面试,我有一个重要发现.......>>> 前端页面: <div class="container"><div cla ...
vue中动态添加组件
效果: 代码: <template><div><div v-for="(item,index) in lst"><h4>{{item ...
vue中动态渲染组件
https://blog.csdn.net/qq_42345237/article/details/98348889 https://www.cnblogs.com/moqiutao/p/114403 ...
[vue require动态引入组件、变量]
https://segmentfault.com/q/1010000037751212?utm_source=tag-newest
【Vue.js 3.0源码】KeepAlive 组件：如何让组件在内存中缓存和调度？
自我介绍:大家好,我是吉帅振的网络日志(其他平台账号名字相同),互联网前端开发工程师,工作5年,去过上海和北京,经历创业公司,加入过阿里本地生活团队,现在郑州北游教育从事编程培训. 一.前言多个平行 ...
Vue教程6【完结】【vue-router】路由，路由传参，编程式路由导航，缓存路由组件，路由守卫，路由模式，vue ui组件库
vue-router 了解 vue插件库,用来实现SPA应用(单页面) 整个页面只有一个完整的页面点击页面中导航链接,不会刷新页面,只做局部更新数据通过ajax请求路由的理解一组映射关系(ke ...

Vue学习（动态组件、组件路由缓存keepalive）-学习笔记

文章目录

Vue学习（动态组件、组件路由缓存keepalive）-学习笔记

动态组件

组件路由缓存keepalive

Vue学习（动态组件、组件路由缓存keepalive）-学习笔记相关推荐

最新文章

热门文章