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

基于这个需求 ，我们使用 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. 【Zookeeper】Re02 CuratorAPI

    Curator,提供给Java操作ZK的API组件: 需要的组件依赖: <!-- https://mvnrepository.com/artifact/org.apache.curator/cu ...

  2. 【SpringBoot】08 探索配置方式 Part4 优先加载的路径

    配置文件的加载位置: SpringBoot启动会扫描i以下为位置的applicationproperties 或者application.yml文件,作为springboot的默认配置文件 优先级从高 ...

  3. 智慧城市（Smart City）—— 华为预测2025年的10大趋势（ Huawei Predicts 10 Megatrends for 2025 ）

    原文: https://www.huawei.com/en/news/2019/8/huawei-predicts-10-megatrends-2025 相关: https://www.huawei. ...

  4. tensorflow 数据集对象（tf.data）的使用( tf.data.Dataset 、tf.data.TextLineDataset 、 tf.data.TFRecordDataset ) 示例

    tensorflow   使用数据集(tf.data)的方法对数据集进行操纵. 1.    对   数组(内存向量)  进行操纵 : import tensorflow as tf input_dat ...

  5. windows10开启电源模式中的休眠选项

    使用管理员权限开启PowerShell,输入命令: powercfg -h on

  6. springboot中统一日志输出logback

    1.背景 为了便于分析和记录系统的运行,一个系统输出其运行的关键日志是非常必要的 比如输出:请求参数.请求url.请求方式.执行的sql.重要操作的日志.响应结果等 而这些日志中,大部分不需要我们手动 ...

  7. plsql中的常用功能整理

    1.关键字查找 2.保存登录密码 完美!

  8. 火山引擎ByteHouse助力车企实现高性能数据分析

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群.   新能源汽车市场正在迎来飞速发展时期.根据 IDC 预测,中国乘用车市场中,新能源车市场规模将在2028年超过 ...

  9. Win32 ListCtrl控件点击列标题排序

    1.在WM_NOTIFY消息中捕获鼠标点点击列的索引 int MyMainDialog::OnNotify(NMHDR* pNMhdr) { if (pNMhdr->idFrom == IDC_ ...

  10. 获取微信小程序页面路径

    2024/07/12 1.步骤 2.注意事项 3.参考 1.步骤 微信公众号关联小程序时需要用到小程序的页面路径,获取步骤如下:' 登录微信公众平台--工具--生成小程序码--获取更多页面路径--填写 ...