Vue_(组件通讯)动态组件结合keep-alive
keep-alive 传送门
<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。
当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。
主要用于保留组件状态或避免重新渲染
Learn
一、不使用<keep-alive>包裹动态组件
二、使用<keep-alive>包裹动态组件
目录结构
一、不使用<keep-alive>包裹动态组件
此时组件A、B、C组件中的数会一直随机0~100且不重复
<div id="GaryId">
<button @click="selectedName = 'my-component-a'"> a </button>
<button @click="selectedName = 'my-component-b'"> b </button>
<button @click="selectedName = 'my-component-c'"> c </button> <component :is="selectedName"></component> </div>
"my-component-a":{
template:"<h1>A :{{num}}</h1>",
data(){
return{
num:Math.ceil(Math.random()*100)
}
}
},
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gary</title>
</head>
<body>
<div id="GaryId">
<button @click="selectedName = 'my-component-a'"> a </button>
<button @click="selectedName = 'my-component-b'"> b </button>
<button @click="selectedName = 'my-component-c'"> c </button> <component :is="selectedName"></component> </div>
</body> <script type="text/javascript" src="../js/vue.js" ></script>
<script type="text/javascript"> new Vue({
data:{
selectedName:'my-component-a'
},
components:{
"my-component-a":{
template:"<h1>A :{{num}}</h1>",
data(){
return{
num:Math.ceil(Math.random()*100)
}
}
},
"my-component-b":{
template:"<h1>B :{{num}}</h1>",
data(){
return{
num:Math.ceil(Math.random()*100)
}
}
},
"my-component-c":{
template:"<h1>C :{{num}}</h1>",
data(){
return{
num:Math.ceil(Math.random()*100)
}
}
}
}
}).$mount("#GaryId");
</script>
</html>
Gary_dynamic_component.html
二、使用<keep-alive>包裹动态组件
此时组件A、B、C组件中的数会第一次会随机出现，随后保存到缓存中，第二次再点击的时候它们会读取缓存中的数
<div id="GaryId">
<button @click="selectedName = 'my-component-a'"> a </button>
<button @click="selectedName = 'my-component-b'"> b </button>
<button @click="selectedName = 'my-component-c'"> c </button> <keep-alive>
<component :is="selectedName"></component>
</keep-alive>
</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gary</title>
</head>
<body>
<div id="GaryId">
<button @click="selectedName = 'my-component-a'"> a </button>
<button @click="selectedName = 'my-component-b'"> b </button>
<button @click="selectedName = 'my-component-c'"> c </button> <keep-alive>
<component :is="selectedName"></component>
</keep-alive>
</div>
</body> <script type="text/javascript" src="../js/vue.js" ></script>
<script type="text/javascript"> new Vue({
data:{
selectedName:'my-component-a'
},
components:{
"my-component-a":{
template:"<h1>A :{{num}}</h1>",
data(){
return{
num:Math.ceil(Math.random()*100)
}
}
},
"my-component-b":{
template:"<h1>B :{{num}}</h1>",
data(){
return{
num:Math.ceil(Math.random()*100)
}
}
},
"my-component-c":{
template:"<h1>C :{{num}}</h1>",
data(){
return{
num:Math.ceil(Math.random()*100)
}
}
}
}
}).$mount("#GaryId");
</script>
</html>
Gary_dynamic_component.html
当只想缓存A组件
<keep-alive include="my-component-a">
<component :is="selectedName"></component>
</keep-alive>
当想缓存A组件和B组件时候
<keep-alive :include="['my-component-a','my-component-b']">
<component :is="selectedName"></component>
</keep-alive>
排除缓存A组件和B组件的时候
<keep-alive :exclude="['my-component-a','my-component-b']">
<component :is="selectedName"></component>
</keep-alive>
Vue_(组件通讯)动态组件结合keep-alive的更多相关文章
- Vue_(组件通讯)动态组件
动态组件 传送门 在一个元素上挂载多个组件,根据不同状态进行切换的时候,可以使用动态组件 动态组件的使用:需要使用内置组件<component></component>,根据 ...
- Vue_(组件通讯)子组件向父组件传值
Vue组件 传送门 子组件向父组件传值:子组件通过$.emit()方法以事件形式向父组件发送消息传值: 使用步骤: 1.定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: ...
- Vue_(组件通讯)父组件向子组件传值
Vue组件 传送门 父组件向子组件传值:父组件通过属性向下传值的方式和子组件通信: 使用步骤: 1.定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件 2.准备获取数据:c ...
- Vue_(组件通讯)父子组件简单关系
Vue组件 传送门 在Vue的组件内也可以定义组件,这种关系成为父子组件的关系 如果在一个Vue实例中定义了component-a,然后在component-a中定义了component-b,那他们的 ...
- Hibernate学习---第五节：普通组件和动态组件
一.普通组件映射配置 1.创建组件类,代码如下: package learn.hibernate.bean; /** * 组件类 */ public class Phones { private St ...
- Vue两种组件类型介绍：递归组件和动态组件
一递归组件 递归组件的特性就是可以在自己的template模板中调用自己本身.值得注意的它必须设置name属性. // 递归组件 recursive.vue <template> < ...
- [Vue]组件——实现动态组件：keep-alive的使用
1.在app.vue中用一个 <keep-alive> 元素将其动态组件包裹起来: keepAlive为true时,第一次被创建的时候缓存下来,为false时,不会缓存 <keep- ...
- Vue 组件4 动态组件
动态组件 通过使用保留的<component>元素,动态的绑定到它的is特性,我们让多个组件同时使用同一个挂载点,并动态切换: var vm = new Vue({ el: '#examp ...
- Vue组件的操作-自定义组件，动态组件，递归组件
作者 | Jeskson 来源 | 达达前端小酒馆 v-model双向绑定 创建双向数据绑定,v-model指令用来在input,select,checkbox,radio等表单控件.v-model指 ...
随机推荐
- kafka运维填坑
转载自:https://www.jianshu.com/p/d2cbaae38014 前提: 只针对Kafka 0.9.0.1版本; 说是运维,其实偏重于问题解决; 大部分解决方案都是google而来 ...
- asp.net 4.Redirect重定向和文件图片上传
1.Response.Redirect 如图所示: 1.用户点击修改按钮, 浏览器向服务器发送一个POST请求 http://localhost:6543/UpdateUser.ashx 2.服务器的 ...
- js点击发送验证码 xx秒后重新发送
用于一些注册类的场景,点击发送验证码,xx秒后重新发送. 利用 setTimeout 方法,xx秒后执行指定的方法,修改button的属性值,disabled为true时为灰色,不可点击. <! ...
- Perl数据类型
Perl 是一种弱类型语言,所以变量不需要指定类型,Perl 解释器会根据上下文自动选择匹配类型. Perl 有三个基本的数据类型:标量.数组.哈希.以下是这三种数据类型的说明: 标量 标量是Perl ...
- 配置Notepad++万能调试
需求: 正常情况下 使用notepad++编辑修改一些网页或脚本文件,修改之后想要查看效果需要Ctrl+S保存,然后从文件目录中打开查看. 现在我想做的就是简化查看效果的流程,让notepad++实现 ...
- 基于MQTT的串口数据转发器
问: ComHub能做什么?ComHub使用MQTT协议,将串口数据经TCP分发出去.这种结构可以实现很多功能:1.COM-Over-TCP: 将COM数据使用TCP远程传送;2.COM多播:一个CO ...
- UNetbootin安装linux
用u盘安装linux系统,最好的方法莫过于用UNetbootin,网址:http://unetbootin.github.io/ UNetbootin allows you to create boo ...
- 四、指定Nginx启动用户
一.nginx指定启动用户 1.参考宝塔的配置 解释:(linux权限管理) 指定用www用户启动nginx,如果你用root启动nginx,万一nginx有漏洞,被提权了,你服务器就GG了 所以指定 ...
- 并发编程： GIL锁、GIL与互斥锁区别、进程池与线程池的区别
一.GIL 二.关于GIL性能的讨论 三.计算密集测试 四.IO密集测试 五.GIL与互斥锁 六.TCP客户端 七.进程池 八.进程什么时候算是空闲 九.线程池 一.GIL GIL Global In ...
- Java语言基础(10)
1 方法(三) 案例:Demo1 import java.util.Scanner; public class Demo1 { static int min(int num1,int num2){ i ...