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

基于这个需求 ，我们使用 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. 【XML】Extensible Markup Language 可扩展标记语言

    Extensible Markup Language 可扩展标记语言[XML] 视频资料参考自:https://www.bilibili.com/video/BV1B441117Lu?p=186 其他 ...

  2. 【WEB】URL文件

    早些年接触电脑的时候就有这个东西,去网站上下载盗版游戏,网站会附加这种URL文件 双击运行之后是打开浏览器跳转到该文件描述的网址 我从来没想过这东西里面写的是什么 百度经验: https://baij ...

  3. ubuntu18.04系统环境下使用vs code安装pylint检查python的代码错误

    相关: Ubuntu18.04 系统环境下 vscode中忽略pylint某些错误或警告 ============================================ python的代码错 ...

  4. 美的（Midea）超声波清洗机 眼镜清洗机 超声波洗眼镜 首饰剃须刀手表假牙牙套化妆刷 洗眼镜机超声波 MXV-01 —— 工业设计上的重大问题分析

    前段时间买了一个美的的超声波清洗机,就是那种超声波洗眼镜的那种,本着买个高档的可以分体的那种好清洗的原则,就在JD上千挑万选后买了下面的这个货: 链接地址: https://item.jd.com/1 ...

  5. 【转载】Ubuntu20.04安装Bazel

    原文地址: https://zhuanlan.zhihu.com/p/311406177 ====================================== sudo apt install ...

  6. vue项目之主页布局

    1.背景 2.基本结构 代码: <template> <el-container class="home-container"> <!-- 头部--& ...

  7. # Apache SeaTunnel 究竟是什么？

    作者 | Shawn Gordon 翻译 | Debra Chen 原文链接 | What the Heck is Apache SeaTunnel? 我在2023年初开始注意到Apache SeaT ...

  8. 计算购物车价格Vue

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. springboot经验之sql注入、xss注入拦截（POST）

    简介 sql注入.xss注入.cors攻击的简介以及解决方案,可以参考下面链接: https://blog.csdn.net/yhhyhhyhhyhh/article/details/84504487 ...

  10. Mac M1 安装Homebrew

    /bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"