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

基于这个需求 ，我们使用 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. 【转载】Typora 的 Markdown 语法

    原文地址: Typora 的 Markdown 语法 详细见原文: https://support.typoraio.cn/zh/Markdown-Reference/

  2. python3.6—opencv-python报错：Exception: Not found: 'python/cv2/py.typed'

    报错: self).run_setup(setup_script=setup_script) File "/tmp/pip-build-env-zsqslesq/overlay/lib/py ...

  3. 【转载】 深度学习——Xavier初始化方法

    版权声明:本文为CSDN博主「shuzfan」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明.原文链接:https://blog.csdn.net/shuzfan/a ...

  4. 海豚调度调优 | 正在运行的工作流(DAG)如何重新拉起失败的任务(Task)

     本系列文章是DolphinScheduler由浅入深的教程,涵盖搭建.二开迭代.核心原理解读.运维和管理等一系列内容.适用于想对 DolphinScheduler了解或想要加深理解的读者. **祝开 ...

  5. 关于vue按需引入ElMessage和ElMessageBox未被自动引入到auto-important的问题

    相信关于按需引入大家应该都会了,不论是官网还是百度一大堆教程 我这边也是参照https://github.com/youlaitech/vue3-element-admin的写法去写的-----需要的 ...

  6. 在 React 项目中 Editable Table 的实现

    我们是袋鼠云数栈 UED 团队,致力于打造优秀的一站式数据中台产品.我们始终保持工匠精神,探索前端道路,为社区积累并传播经验价值. 本文作者:佳岚 可编辑表格在数栈产品中是一种比较常见的表单数据交互方 ...

  7. RabbitMq消息可靠性之回退模式 通俗易懂 超详细 【内含案例】

    RabbitMq保证消息可靠性之回退模式 介绍 生产者生产的消息没有正确的到达队列就会触发回退模式,进行二次发送 前提 完成SpringBoot 整合 RabbitMq 中的Topic通配符模式 一. ...

  8. Maven经验分享（六）Jboss热部署

    jboss7的部署方式比较多的,如果使用maven构建和管理项目,那当然是使用jboss-as-maven-plugin插件来部署项目是最方便的了. pom.xml配置如下: <plugin&g ...

  9. vue3+ts Axios封装与使用

    创建完vue3 项目后 新版本:动态控制是否显示加载动画.是否需要判断重复请求.https://www.cnblogs.com/lovejielive/p/17676856.html 一,安装Axio ...

  10. three.js的使用

    以创建一个立方体为例 安装 安装three:npm i three 使用 引用 引入three以及three中自带的相机控件OrbitControls用以操控相机: 初始化场景 scene:场景所有t ...