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

基于这个需求 ，我们使用 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. 万字干货：从消息流平台Serverless之路，看Serverless标准演进

    摘要:如今,Serverless化已经成为消息流平台发展的新趋势,而如何更好地基于Serverless化的消息流平台进行应用设计和开发,则成为了一个值得思考的问题. 本文分享自华为云社区<900 ...

  2. 【MySQL】编写随机密码生成脚本

    数据需求: 密码规则是 12位 数字 + 字母 混合后MD5加密 然后导出一个表格或者记录文件,文件没明确要求 实现过程: 1.MD5加密函数使用 SET @txt = '123456'; SELEC ...

  3. 关于Isaac Gym的两个版本比较：IsaacGymEnvs/omni.isaac.gym

    原文地址: https://zhuanlan.zhihu.com/p/590468555 重点: IsaacGymEnvs (IGE)和 omni.isaac.gym (OIG)是两个东西. 原文内容 ...

  4. python中多进程下通信使用管道Pipe与队列 Queue 的区别： Multiprocessing - Pipe vs Queue

    参考: https://stackoverflow.com/questions/8463008/multiprocessing-pipe-vs-queue ====================== ...

  5. mojo编程语言：编译后的mojo二进制执行文件调用python库报错——设置MOJO_PYTHON_LIBRARY变量

    代码: from python import Python fn f() raises: # This is equivalent to Python's `import numpy as np` l ...

  6. baselines算法库common/vec_env/subproc_vec_env.py模块分析

    模块代码: import multiprocessing as mp import numpy as np from .vec_env import VecEnv, CloudpickleWrappe ...

  7. python开发环境安装-包含Anaconda的安装配置和pycharm的安装

    一. 需要得安装包 1.  Anaconda3-5.3.0-Windows-x86_64.exe  python环境 2.pycharm-professional-2021.2.2.exe      ...

  8. 使用FastAPI来开发项目，项目的目录结构如何规划的一些参考和基类封装的一些处理

    使用FastAPI开发项目时,良好的目录结构可以帮助你更好地组织代码,提高可维护性和扩展性.同样,对基类的封装,也可以进一步减少开发代码,提供便利,并减少出错的几率. 下面是一个推荐的目录结构示例: ...

  9. TeX、LaTeX、XeTeX 和 XeLaTeX 之间的关系

    TL;DR 总的来说,在 TeX 世界有两个主要概念,一个是 TeX,一个是 LaTeX.TeX 是一个排版引擎,它为用户提供的排版命令较为底层.LaTeX 是在 TeX 的基础上制作的宏包,它可以让 ...

  10. 基于 GoFrame 框架的 Go 项目打包成镜像，并上传至 Harbor 镜像库

    〇.前言 在云服务时代最流行的部署方式就是容器部署,这也是最推荐的部署方式. 对于 GoFrame 框架就不多介绍了,直接来初始化一个 demo,备用. // 初始化一个项目:gf-demo gf i ...