keep-alive 组件缓存的用法

当Input输入值后没有提交的情况选择了其他列表，当再进入该列表的时候发现刚刚输入的信息不会被保存起来。是因为在切换时组件会触发destroyed，销毁组件。
这时我们就可以用到keep-alive来把组件缓存起来

第一种方法：

这时我们会发现切换时其他的组件输入框的值都保存起来了，但我们只需要保存需要缓存的组件，那就需要keep-alive的两个属性了。

第二种方法：利用路由中的meta属性来控制

然后使用keep-alive结合v-if进行包裹，如果meta中的keepAlive为true进行缓存，否侧不进行缓存，这样可以更灵活一些。

keep-alive 组件缓存的用法相关推荐

Vue keep-alive组件缓存基础用法
keep-aliive组件 <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们. 当组件在 <keep-alive> 内被切换,它的 activa ...
springboot+mybatis集成自定义缓存ehcache用法笔记
今天小编给大家整理了springboot+mybatis集成自定义缓存ehcache用法笔记,希望对大家能有所办帮助! 一.ehcache介绍 EhCache 是一个纯Java的进程内缓存管理框架,属 ...
React 函数式组件缓存原理
对 React 函数式组件缓存的思考自从 React 16.8 版本推出 Hooks 用法以来,围绕函数组件的优化出现了各种不同的思考.本篇文章从 React 底层 Render 角度,分析 Rea ...
Vue 单文件组件||Vue 单文件组件的基本用法||webpack 中配置 vue 组件的加载器|| 在 webpack 项目中使用 vue
Vue 单文件组件传统组件的问题和解决方案 1. 问题 1. 全局定义的组件必须保证组件的名称不重复 2. 字符串模板缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 \ 3. 不支持 CS ...
Vue 中的组件缓存
一.介绍先来看一个问题? 从首页的区块链模块切换到文章详情页面,再从文章详情页面回到首页,我们发现首页重新渲染原来的状态没有了,又回到了推荐模块. 首先,这是正常的状态,并非问题,路由在切换的时候会 ...
java的setbounds_java Swing组件setBounds()简单用法实例分析
本文实例讲述了java Swing组件setBounds()简单用法.分享给大家供大家参考,具体如下: 先看API: public void setBounds(Rectangle r) 移动组件并调 ...
Vue动态组件、组件缓存、组件激活和非激活、组件插槽、组件name
一.动态组件如何切换2个组件互斥的显示或者隐藏呢除了v-if 什么是动态组件? 多个组件使用同一个挂载点,并动态切换.这就是动态组件完成一个注册功能页面, 2个按钮切换, 一个填写注册信息, ...
Ext.form.TextField组件的基本用法
本文主要介绍Ext.form.TextField组件的基本用法: <form id="form1" runat="server"> <div& ...
vue中父子组件及 watch用法
父子组件及 watch vue中父子组件及 watch用法 - coder_zhang123456 - 博客园

keep-alive 组件缓存的用法

keep-alive 组件缓存的用法相关推荐

最新文章

热门文章