父组件home如下：
<template>
<div class="home">
<div>
<button @click="buttonClick(item.name)" v-for="(item) in buttons" :key="item.name">{{item.value}}</button>
</div>
<div>
<keep-alive include="books">
<component :is="viewFirst"></component>
</keep-alive>
</div>
</div>
</template>
<script>
import books from '../components/books.vue'
import notebooks from '../components/notebooks.vue'
import pens from '../components/pens.vue'
export default {
name: 'home',
data () {
return {
buttons: [
{
name: 'books',
value: 'books'
},
{
name: 'notebooks',
value: 'notebooks'
},
{
name: 'pens',
value: 'pens'
}
],
componentArray: [
{
'books': 'books'
},
{
'notebooks': 'notebooks'
},
{
'pens': 'pens'
}
],
viewFirst: 'books'
}
},
components: {
books, notebooks, pens
},
methods: {
// tab选项
buttonClick (name) {
this.viewFirst = name
}
}
}
</script>
子组件之一books如下：
<template>
<div class="books">
<button @click="clickOne">点击一</button>
</div>
</template>
<script>
export default {
name: 'books',
data () {
return {
clickOneDate: 1
}
},
methods: {
clickOne () {
this.clickOneDate = 2
}
}
}
</script>
说明：以上是三个选项卡，默认是name是books的按钮选中，当然对应的是name是books的组件显示。此处只对books组件里面的数据进行了缓存，里面的clickOneDate数据默认是1，点击后成为2。当再点击notebooks或者pens后，再点击books,这时clickOneDate的值还是2。如果还缓存其他组件，只要在home里面的include的值里面用逗号隔开加上即可，如include="books ，notebooks"。
另外：动态组件 is 了解下。
还有：keep-alive的用途还有其他场景，参考官网：https://cn.vuejs.org/v2/api/#keep-alive。
最后：vue路由结合keep-alive相当实用，后续总结。

转载于:https://www.cnblogs.com/caozhuzi/p/11204630.html

vue选项卡切换，某个组件缓存数据keep-alive demo相关推荐

  1. Vue之单文件组件的数据传递,axios请求数据及路由router

    1.传递数据 例如,我们希望把父组件的数据传递给子组件. 可以通过props属性来进行传递. 传递数据三个步骤: 步骤1:在父组件中,调用子组件的组名处,使用属性值的方式往下传递数据 <Menu ...

  2. vue 父向子组件传递数据，子组件向父组件传递数据方式

    父组件向子组件传递数据通过props,子组件引入到父组件中,设置一个值等于父组件的数据,通过:bind将数据传到子组件中,子组件中通过props接收父组件的数据,这样就可以使用父组件的数据了,循环组件 ...

  3. Vue第二天学习总结—— Vue全家桶之组件化开发(组件化开发思想、组件注册、Vue调试工具用法、组件间数据交互传递、组件插槽、基于组件的案例——购物车)

    (一) 组件化开发思想 1. 现实中的组件化思想体现 组件化即是对某些可以进行复用的功能进行封装的标准化工作 标准:要想组件能够成功组合在一起,每个组件必须要有标准 分治:将不同的功能封装到不同的组件 ...

  4. Vue中实现父子组件的数据的双向绑定（vue.sync的用法）

    项目场景: 前两天日常开发时,遇到需要父子组件双向绑定的问题,出现了一些BUG,但是考虑到组件的可维护性,vue中是不允许子组件改变父组件传的props值的 问题描述: 问题场景就是子组件传递数据给父 ...

  5. vuex 实现vue中多个组件之间数据同步以及数据共享。

    http://pan.baidu.com/s/1hrJfpli  demo下载地址 前言 在一些项目中有很多数据状态之间要实现数据共享状态共享,例如购物车的数据.用户的登录状态等等.vue父元素是可以 ...

  6. vue中使用keepAlive组件缓存遇到的坑

    项目开发中在用户由分类页category进入detail需保存用户状态,查阅了Vue官网后,发现vue2.0提供了一个keep-alive组件. 上一篇讲了keep-alive的基本用法,现在说说遇到 ...

  7. vue --- 模块从子组件获取数据

    先看个一般的例子: // 我们需要将信息从子组件传递给父组件,(有可能不止一条信息,因此)肯定需要一个标识,这个标识放在$emit里面(js),在dom中通过@来关联父元素.如下:<div id ...

  8. html用vue传递数据,Vue组件及数据传递详解

    本文我们就和大家详细介绍一下Vue系列(三):组件及数据传递.路由.单文件组件.vue-cli脚手架,希望能帮助到大家. 一. 组件component 1. 什么是组件?组件(Component)是 ...

  9. layui获取tab页id_LayUI的Tab选项卡切换显示对应数据

    LayUI tab选项卡 + 分页展示 实现 Tab选项卡切换显示对应数据 要求:实现tab选项卡改变的同时展示数据也跟着改变 实现条件: 1.选项卡[官网 – 文档/示例 – 页面元素 – 选项卡] ...

  10. 2021-12-11 vue移动端卖座电影项目(十一) comingSoon用后台获取的数据写样式,以及用vuex的Action处理异步问题:切换FilmHeader中的两个标签时直接缓存数据

    文章目录 0.vuex工作流程图复习 1.思路 2.axios获取后台数据(仿nowPlaying页即可) 3.用vuex的Action处理异步问题:切换FilmHeader中的"正在热映& ...

最新文章

  1. 实时获取vuex更新的新数据_京东手机销量实时数据更新 荣耀Play4T Pro位列第一
  2. 【无线***实战】小试无线安全
  3. 扩展欧几里得学习笔记
  4. ppt演讲计时器_用演示文稿演讲的10个技巧
  5. 【模板】EK求最大流、dinic求最大流
  6. sap 订单状态修改时间_SAP中对于获取订单的状态
  7. BNU44583——Star Trek: First Contact——————【01背包】
  8. React中refs的理解
  9. 计算机网络讨论课感悟,计算机网络课程学习心得体会
  10. OpenCV中的内存泄露问题（cvLoadImage，cvCloneImage）【转】
  11. jpadao层继承什么_实木复合地板特点是什么
  12. Silverlight实用窍门系列：74.Silverlight使用Perst数据库Demo
  13. SpringBoot整合jsp技术
  14. XML转换JSON格式
  15. 暴力算法-BF（Brute Force）
  16. 广东计算机二级ps,广东省计算机等级考试二级（广东计算机二级考试真题）
  17. 日本語トレーニング（二十二）
  18. Jmeter的元件使用介绍：取样器详解
  19. html collapse不重叠,html – border-collapse的组合：collapse和transform：translate
  20. Ubuntu虚拟机使用桥接网络设置静态IP

热门文章

  1. MyCat全局序列之本地文件方式
  2. 深入理解JVM一JVM内存模型
  3. 从开发到发布一款基于Vue2x的图片预览插件
  4. 一步一步创建ASP.NET MVC5程序[Repository+Autofac+Automapper+SqlSugar](十一)
  5. MySQL特有的SQL语句 第一弹
  6. 交互软件Axure—高保真原型
  7. JTA分布式事务处理
  8. CloudStack升级中文指南：4.1.x/4.2.x 至4.3版本
  9. 【高效程序员系列】1、好马配好鞍——舒适的工作环境
  10. 一起谈.NET技术，在.NET中嵌入IronPython 交互