使用场景：我们开发项目的时候，会遇到组件之间的切换，一般都是创建组件销毁组件来回切换 ；但是现在需求是切换组件的时候，另一个组件不会销毁；

基于这个需求 ，我们使用 keep-live 组件包裹起来要切换的组件 ；

keep-live 是 vue 内置的组件 ，避免组件被重新渲染 ；

keep-live 有 2 个钩子函数  activated  - 组件激活触发 ；deactivated 组件失活触发 ；

Vue 如何实现组件切换的时候，让组件缓存，不会被销毁的更多相关文章

  1. vue3常见问题及解决方案（四）父组件切换行，然后子组件切换tab，子组件内的数据不刷新

    问题描述 父组件切换行,然后子组件切换tab,子组件内的数据不刷新. 例如父组件为订单,子组件为订单相关商品和相关客户,商品和客户使用tab选项卡组织. 当tab显示商品页时,切换订单,商品页内容跟着 ...

  2. Vue学习笔记【24】——Vue组件（组件切换）

    使用flag标识符结合v-if和v-else切换组件 页面结构:(缺点:只适用于两个组件间切换,不适合多个)  <div id="app">    <input ...

  3. vue 2.0 路由切换以及组件缓存源代码重点难点分析

    摘要 关于vue 2.0源代码分析,已经有不少文档分析功能代码段比如watcher,history,vnode等,但没有一个是分析重点难点的,没有一个是分析大命题的,比如执行router.push之后 ...

  4. Vue系列之 => 组件切换

    组件切换方式一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  5. vue + element-ui 制作tab切换（切换vue组件，踩坑总结）

    本篇文章使用vue结合element-ui开发tab切换vue的不同组件,每一个tab切换的都是一个新的组件. 1.vue如何使用element-ui 上一篇文章已经分享了如何在vue中使用eleme ...

  6. AntDesign vue学习笔记（四）使用组件切换

    同样实现上一篇功能, 改为使用组件切换,实现方法如下 1.修改MainFrm中的<router-view/>如下代码 2.注册局部组件 export default { name: 'Ma ...

  7. 组件切换方式（Vue.js）

    这里,我用一个注册登录两组件的切换实例来演示: 切换方式一 <!DOCTYPE html> <html lang="zh-CN"> <head> ...

  8. Vue学习之组件切换及父子组件小结（八）

    一.组件切换: 1.v-if与v-else方式: <!DOCTYPE html> <html lang="en"> <head> <met ...

  9. Vue 组件切换

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. Vue.js：轻量高效的前端组件化方案

    转发一篇尤老师对vue.js的介绍,了解vue.js的来龙去脉.不过现在已经是2.0了,也有添加一些新的东西,当然有些东西也改了. Vue.js:轻量高效的前端组件化方案 Vue.js 是我在2014 ...

随机推荐

  1. CentOS-7离线安装net-tools

    1.下载相关安装包 CentOS-7 所有rpm包的仓库地址:https://vault.centos.org/7.9.2009/os/x86_64/Packages/ net-tools-2.0-0 ...

  2. 【DingTalk】钉钉应用开发

    前言部分 最近要开发一个企业内部应用系统 无纸化办公使用钉钉,领导想在钉钉的基础上加入我们自己的应用 引入Activiti工作流引擎开发审批立项等等业务活动,做一个大一统的系统 然后让我负责开发钉钉应 ...

  3. 【ECharts】03 样式

    ECharts4 开始,除了默认主题外,内置了两套主题,分别为 light 和 dark. 设置方式: var chart = echarts.init(dom, 'light'); var char ...

  4. 使用ChatGPT时的信息安全问题

    ChatGPT由于其在对话方面的AI性能的卓越表现已经远远超越了同类的产品,因此赢得了国际科研领域的极大重视,并且也得到了广大用户的支持,但是在人们尽情使用的时候往往忘记了关于ChatGPT的信息安全 ...

  5. 记一次 .NET某智慧出行系统 CPU爆高分析

    一:背景 1. 讲故事 前些天有位朋友找到我,说他们的系统出现了CPU 100%的情况,让你帮忙看一下怎么回事?dump也拿到了,本想着这种情况让他多抓几个,既然有了就拿现有的分析吧. 二:WinDb ...

  6. ChatGLM

    ChatGLM: A Family of Large Language Models from GLM-130B to GLM-4 All Tools(2024.7.16) Code:https:// ...

  7. 13. Advanced-control timers (TIM1 and TIM8)

    1. 基本介绍 有三个基础的寄存器: 计数寄存器(TIMx_CNT,Counter register) 预分频寄存器(TIMx_PSC,Prescaler register) 自动重载寄存器(TIMx ...

  8. 一口Linux公众号粉丝破万了！

    0.楔子 终于万粉了! 总算熬过了冷启动阶段. 一万这个小目标看着很简单, 但是实际做的时候,发现远没有自己想的那么容易. 亿万粉丝,其实并不是很多,一度犹豫要不要写这个万份总结, 和嵌入式领域内的一 ...

  9. 搜索组件优化 - Command ⌘K

    前言: DevNow 项目中我们使用了 DocSearch 来实现搜索功能,但是由于有以下的限制: 您的网站必须是技术文档或技术博客. 您必须是网站的所有者,或者至少具有更新其内容的权限 您的网站必须 ...

  10. windows server 2008 和 win10 双系统安装 ,bios引导 uefi引导总结(可能只适应于我的品牌的笔记本电脑，仅做记录给自己方便下次装系统)

    之前电脑是装好了这两个系统并且正常开机的,bios引导的,也就是开机的时候出现黑框框,上下两个系统选项的那种. 后来在windows server2008里面不小心把win10的盘符给删了一些文件.. ...