好家伙,

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的使用 让组件"活下去""的更多相关文章

  1. 第八十九篇:Vue 重学插槽slot

    好家伙, 1.什么是插槽? 插槽是vue为组件的封装者提供的能力.允许开发者在封装组件时, 把不确定的,希望由用户指定的部分定义为插槽   我们依然可以把它理解为一个占位符 1.1.插槽的基本用法 试 ...

  2. 第八十五篇:Vue购物车(六) 总价的动态计算

    好家伙, 1.实现总价的动态计算 商品数量被动态的改变后, 相应的总价同样会改变 所以我们需要重新计算总价格了 这个的实现并不难 我只要拿到商品的数量就好了 我们用一个计算属性计算出已勾选商品的总数量 ...

  3. 第八十四篇:Vue购物车(五) 商品数量的增减

    好家伙, 1.商品数量的增减 我们把商品的数量增减独立出来,写成一个独立的组件Counter <template> <div class="number-container ...

  4. 第八十二篇:Vue购物车(三) 实现全选功能

    好家伙, 继续完善购物车相应功能 1.如何实现全选和反全选 1.1.全选框的状态显示(父传子) 来一波合理分析: 在页面中,有三个商品中 三个商品中的第二个未选择, 我么使用一个计算属性(fullSt ...

  5. 《手把手教你》系列基础篇(八十八)-java+ selenium自动化测试-框架设计基础-Log4j 2实现日志输出-下篇(详解教程)

    1.简介 上一篇宏哥讲解和分享了如何在控制台输出日志,但是你还需要复制粘贴才能发给相关人员,而且由于界面大小限制,你只能获取当前的日志,因此最好还是将日志适时地记录在文件中直接打包发给相关人员即可.因 ...

  6. salesforce零基础学习(八十八)项目中的零碎知识点小总结(二)

    通过做项目以及群里面的一些大神的聊天,总结一下关于项目中的两个知识点,以后当做参考. 一. 在custom setting中配置集成接口信息后刷sandbox的问题 我们做项目时,经常会遇见和其他平台 ...

  7. 第三十二篇:vue的响应式原理

    好家伙 什么是响应式?比较官方的回答: Vue.js 的核心包括一套"响应式系统". "响应式",是指当数据改变后,Vue 会通知到使用该数据的代码. 例如,视 ...

  8. (八十八)VFL语言初步 - 实现布局

    [基本语法] VFL的语法为H:和V:开头,代表水平和垂直. 接下来如果要涉及距离,使用|-x-,x为距离的点数. 对于视图,用[ ]包围,例如[blueView]. ①下面的语句实现了blueVie ...

  9. Java开发笔记(八十八)文件字节I/O流

    前面介绍了如何使用字符流读写文件,并指出字符流工具的处理局限,进而给出随机文件工具加以改进.随机文件工具除了支持访问文件内部的任意位置,更关键的一点是通过字节数组读写文件数据,采取字节方式比起字符方式 ...

随机推荐

  1. 七牛云创建存储空间并绑定自定义域名-https协议

    七牛云创建存储空间并绑定自定义域名-https协议 一.准备 0.绑定自定义域名的前提:你起码拥有过一个备案过的域名[一级域名] 1.在七牛云创建一个存储空间 2.存储空间绑定自定义域名(cdn加速) ...

  2. Spring框架系列(2) - Spring简单例子引入Spring要点

    上文中我们简单介绍了Spring和Spring Framework的组件,那么这些Spring Framework组件是如何配合工作的呢?本文主要承接上文,向你展示Spring Framework组件 ...

  3. jenkins结合ansible发布

    1. yum安装的jenkins修改配置文件调用ansible vim /etc/sysconfig/jenkins 2. 安装Jenkins Ansible插件 Manage Jenkins---& ...

  4. 一文搞懂jsBridge的运行机制

    我司的APP是一个典型的混合开发APP,内嵌的都是前端页面,前端页面要做到和原生的效果相似,就避免不了调用一些原生的方法,jsBridge就是js和原生通信的桥梁,本文不讲概念性的东西,而是通过分析一 ...

  5. NC204382 中序序列

    NC204382 中序序列 题目 题目描述 给定一棵有 \(n\) 个结点的二叉树的先序遍历与后序遍历序列,求其中序遍历序列. 若某节点只有一个子结点,则此处将其看作左儿子结点 示例1 输入 5,[3 ...

  6. 019(The XOR Largest Pair)(字典树)

    题目:http://ybt.ssoier.cn:8088/problem_show.php?pid=1472 题目思路:异或是啥呀? 异或就是把两个数字变成位数相同的二进制在同位比较,相同为0,不同为 ...

  7. 一款 IDEA 插件帮你优雅转化 DTO、VO、BO、PO、DO

    作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.承认你优秀很难 很多码农,把路走窄了 捧一个,喷一个,很多码农都不会多一点思路看问题,总是 ...

  8. redis 集群 slots are covered by nodes.

    原因数据数据损坏.需要修复 1.检测 redis-cli --cluster check 127.0.0.1:7000 2.检测结果 slots are covered by nodes3.进行修复 ...

  9. ApiDay002_02 Object中的包装类

    1.Object:对象/东西 是所有类的鼻祖,所有类都直接或间接继承了Object, 万物皆对象,为了多态 Objec中有几个经常被派生类重写的方法:toString()和equals(); 调用to ...

  10. angular里forwardRef的原理

    一段会报错的angular代码 @Injectable() class Socket { constructor(private buffer: Buffer) { } } console.log(B ...