Menu
×
   ❮   
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Vue Tutorial

Vue HOME Vue Intro Vue Directives Vue v-bind Vue v-if Vue v-show Vue v-for Vue Events Vue v-on Vue Methods Vue Event Modifiers Vue Forms Vue v-model Vue CSS Binding Vue Computed Properties Vue Watchers Vue Templates

Scaling Up

Vue Why, How and Setup Vue First SFC Page Vue Components Vue Props Vue v-for Components Vue $emit() Vue Fallthrough Attributes Vue Scoped Styling Vue Local Components Vue Slots Vue v-slot Vue Scoped Slots Vue Dynamic Components Vue Teleport Vue HTTP Request Vue Template Refs Vue Lifecycle Hooks Vue Provide/Inject Vue Routing Vue Form Inputs Vue Animations Vue Animations with v-for Vue Build Vue Composition API

Vue Reference

Vue Built-in Attributes Vue Built-in Components Vue Built-in Elements Vue Component Instance Vue Directives Vue Instance Options Vue Lifecycle Hooks

Vue Examples

Vue Examples Vue Exercises Vue Quiz Vue Server Vue Certificate

Vue <KeepAlive> Component


Example

Using the built-in <KeepAlive> component to make the components keep the previously entered user inputs:

<KeepAlive>
  <component :is="activeComp"></component>
</KeepAlive>
Run Example »

See more examples below.


Definition and Usage

The built-in <KeepAlive> component is used around dynamic components to cache the components when they are not active, so that their state is kept.


Props

The <KeepAlive> component can be used together with different props so that we can specify which components that should be cached so that they keep their state.

Prop Description
none All components are cached so that their state is kept Run Example »
include Optional. Specify the names of the components that should keep their state Run Example »
exclude Optional. Specify the names of the components that should not keep their state Run Example »
max Optional. Specify the maximum number of components that should keep their state. If you specify to cache a maximum of 4 components, it will be the 4 components that were last visited that are cached Run Example »

The Lifecycle of Components Cached with <KeepAlive>

Components that are cached with the built-in <KeepAlive> component will switch between the activated and deactivated states when they are set, or not set, as the active dynamic component.

The activated() and deactivated() lifecycle hooks can be used to run code when such a cached component is set, or not set, as the active component.


More Examples

Example

Using the include prop to specify which components that will cache the values:

<KeepAlive include="CompOne,CompThree">
  <component :is="activeComp"></component>
</KeepAlive>
Run Example »

Example

Using the exclude prop to specify which components that will not cache the values:

<KeepAlive exclude="CompOne">
  <component :is="activeComp"></component>
</KeepAlive>
Run Example »

Example

Using the max prop to specify how many of the last visited components that will cache the values:

<KeepAlive :max="2">
  <component :is="activeComp"></component>
</KeepAlive>
Run Example »

Related Pages

Vue Tutorial: Dynamic Components

Vue Tutorial: The 'activated' and 'deactivated' Lifecycle Hooks


W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.