第八十八篇:Vue keep-alive的使用 让组件"活下去""
好家伙,
1.关于keep-alive
这是一个用于阻止组件自行销毁的插件
<!-- keep-alive可以把内部组件进行缓存,而不是销毁组件 -->
那么我们什么时候会用到他呢?
举个栗子
他来了,他来了,经典自增1按钮(太TM经典了)
上代码:
Left.vue组件中:
<template>
<div>
<h1>我是主页</h1>
<h1>我的count值为:{{count}}</h1>
<button @click="count+=1">+1</button>
</div>
</template> <script>
export default {
data(){
return{
count:0
}
}
}
</script>
来看看效果:

但是我们会发现一个问题
就是我在使用主页时,把count加到了5,
转去"我的"组件
当我在回到"首页"组件
count的值变回0,
大概可以看出组件被重新加载了,
这是怎么回事?
当我点击"我的"组件
"首页"的这个组件被销毁了,
当我再次点回"首页"时,
组件被重新加载了
如果我们希望组件不被销毁,
那么我们可以使用<keep-alive>
代码如下:
在App,vue组件中:
<template>
<div>
<button @click="comName='Left'">首页</button>
<button @click="comName='Right'">我的</button>
<!-- keep-alive可以把内部组件进行缓存,而不是销毁组件 -->
<keep-alive>
<component :is="comName"></component>
</keep-alive>
</div>
</template> <script>
//1.导入需要的组件
import Left from './components/Left.vue'
import Right from './components/Right.vue' export default {
data(){
return{
comName:'Left'
}
},
components:{
Left,
Right
//简写为 Left
}
}
</script>
搞定了

组件活下来了
第八十八篇:Vue keep-alive的使用 让组件"活下去""的更多相关文章
- 第八十九篇:Vue 重学插槽slot
好家伙, 1.什么是插槽? 插槽是vue为组件的封装者提供的能力.允许开发者在封装组件时, 把不确定的,希望由用户指定的部分定义为插槽 我们依然可以把它理解为一个占位符 1.1.插槽的基本用法 试 ...
- 第八十五篇:Vue购物车(六) 总价的动态计算
好家伙, 1.实现总价的动态计算 商品数量被动态的改变后, 相应的总价同样会改变 所以我们需要重新计算总价格了 这个的实现并不难 我只要拿到商品的数量就好了 我们用一个计算属性计算出已勾选商品的总数量 ...
- 第八十四篇:Vue购物车(五) 商品数量的增减
好家伙, 1.商品数量的增减 我们把商品的数量增减独立出来,写成一个独立的组件Counter <template> <div class="number-container ...
- 第八十二篇:Vue购物车(三) 实现全选功能
好家伙, 继续完善购物车相应功能 1.如何实现全选和反全选 1.1.全选框的状态显示(父传子) 来一波合理分析: 在页面中,有三个商品中 三个商品中的第二个未选择, 我么使用一个计算属性(fullSt ...
- 《手把手教你》系列基础篇(八十八)-java+ selenium自动化测试-框架设计基础-Log4j 2实现日志输出-下篇(详解教程)
1.简介 上一篇宏哥讲解和分享了如何在控制台输出日志,但是你还需要复制粘贴才能发给相关人员,而且由于界面大小限制,你只能获取当前的日志,因此最好还是将日志适时地记录在文件中直接打包发给相关人员即可.因 ...
- salesforce零基础学习(八十八)项目中的零碎知识点小总结(二)
通过做项目以及群里面的一些大神的聊天,总结一下关于项目中的两个知识点,以后当做参考. 一. 在custom setting中配置集成接口信息后刷sandbox的问题 我们做项目时,经常会遇见和其他平台 ...
- 第三十二篇:vue的响应式原理
好家伙 什么是响应式?比较官方的回答: Vue.js 的核心包括一套"响应式系统". "响应式",是指当数据改变后,Vue 会通知到使用该数据的代码. 例如,视 ...
- (八十八)VFL语言初步 - 实现布局
[基本语法] VFL的语法为H:和V:开头,代表水平和垂直. 接下来如果要涉及距离,使用|-x-,x为距离的点数. 对于视图,用[ ]包围,例如[blueView]. ①下面的语句实现了blueVie ...
- Java开发笔记(八十八)文件字节I/O流
前面介绍了如何使用字符流读写文件,并指出字符流工具的处理局限,进而给出随机文件工具加以改进.随机文件工具除了支持访问文件内部的任意位置,更关键的一点是通过字节数组读写文件数据,采取字节方式比起字符方式 ...
随机推荐
- Python中的逻辑表达式
首先要明确一点,Python的逻辑运算符,可以用来操作任何类型的表达式(不局限于Bool类型),且运算后的结果也不一定是Bool类型的,而是其左右其中一个表达式的值 表达式1 and 表达式2 pyt ...
- 集成学习——XGBoost(手推公式)
- Maven配置【详细】
参考网址:https://www.jianshu.com/p/f2f52a062d5b
- SpringBoot启动代码和自动装配源码分析
随着互联网的快速发展,各种组件层出不穷,需要框架集成的组件越来越多.每一种组件与Spring容器整合需要实现相关代码.SpringMVC框架配置由于太过于繁琐和依赖XML文件:为了方便快速集成第三 ...
- 岭回归和LASSO
0.对于正则罚项的理解 1.岭回归(L2 ridge regression ) 是一种专用于共线性数据分析的有偏估计回归方法,实质上是一种改良的最小二乘估计法,通过放弃最小二乘法的无偏性,以损失部分信 ...
- HTML 超文本标记语言 (Hyper Text Markup Language)
1.HTML是什么 HTML指的超文本标记语言(Hyper Text Markup Language),是一种用来描述网页的语言.超文本指的是除了可以包含文字之外,还可以包含图片.链接.音乐.视频.程 ...
- HashSet 添加/遍历元素源码分析
HashSet 类图 HashSet 简单说明 HashSet 实现了 Set 接口 HashSet 底层实际上是由 HashMap 实现的 public HashSet() { map = new ...
- C++20 以 Bazel & Clang 开始
C++20 如何以 Bazel & Clang 进行构建呢? 本文将介绍: Bazel 构建系统的安装 LLVM 编译系统的安装 Clang is an "LLVM native&q ...
- 无用的IP黑名单
无效的IP黑名单,有些还没有收集,在阿里云或者腾讯云的安全组里面设置,拦截不必要的IP,免得遭到攻击,也避免的CPU和内存过高 来源 备注82.102.21.217 拒绝 随机访问目录攻击,频繁69. ...
- Code Runner for VS Code,下载量突破 4000 万!支持超过50种语言
大家好! 我是韩老师.还记得 6 年前的夏天,我在巨硬写着世界上最好的语言,有时也需要带着游标卡尺写着另一门语言.然而,我对这两门语言都不熟悉,如果能在 VS Code 中方便快捷地运行各种语言,那岂 ...