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

基于这个需求 ，我们使用 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. 【Scala】08 模式匹配 Match Case

    由Scala封装的一套match case处理,功能比原Java的更为强大 package cn import scala.collection.immutable.IndexedSeqDefault ...

  2. 面向分布式强化学习的经验回放框架（使用例子Demo）——Reverb: A Framework for Experience Replay

    相关前文: 面向分布式强化学习的经验回放框架--Reverb: A Framework for Experience Replay 论文题目: Reverb: A Framework for Expe ...

  3. Inno Setup 出现 the drive or unc share you selected does not exist or is not accessible 解决记录

    背景 软件是使用Inno Setup的,且安装后,再次安装是默认安装到历史路径.一次用户电脑维修后,发现再次安装后报错 解决办法 取消自动安装到默认路径就好了~ UsePreviousAppDir=n ...

  4. Windows 修改本地hosts文件

    在在使用win下面的一些php集成开发工具的时候(比如 phpstudy wampserver等) 有时候会有这样的需求:我不想通过localhost/xxx/xxx/xxx.php 这样的方式访问我 ...

  5. 面试官：说说volatile应用和实现原理？

    volatile 是并发编程中的重要关键字,它的名气甚至是可以与 synchronized.ReentrantLock 等齐名,也是属于并发编程五杰之一. 需要注意的是 volatile 并不能保证原 ...

  6. .NET MAUI 里，为什么 FlexLayout 这么难用？

    管中窥豹,可见一斑 Layout: FlexLayout:

  7. 你还在手动操作仓库？这款 CLI 工具让你效率飙升300%！

    前言 作为一名开发者,我经常会在 GitHub 和 Gitee 上 fork 各种项目.时间一长,这些仓库就会堆积如山,变成了"垃圾仓库".每次打开代码托管平台,看到那些不再需要的 ...

  8. 自签名证书实现浏览器IP证书访问

    创建文件夹 mkdir ssl cd ssl #IP.2 改成自己电脑的IP地址或服务器IP vi ext.ext keyUsage = nonRepudiation, digitalSignatur ...

  9. 使用Packer构建镜像

    什么是Packer Packer 是一个强大的工具,它可以帮助我们轻松地构建各种类型的镜像,如虚拟机镜像.Docker 镜像等. Packer 的工作原理是通过定义一个配置文件,该文件描述了要构建的镜 ...

  10. C#ListView类的继承

    ListView控件类新加方法 新建一个类myListView class myListView : System.Windows.Forms.ListView { //添加自定义的方法 -- //设 ...