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>
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>
Example
Using the exclude prop to specify which components that will not cache the values:
<KeepAlive exclude="CompOne">
<component :is="activeComp"></component>
</KeepAlive>
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>
Related Pages
Vue Tutorial: Dynamic Components
Vue Tutorial: The 'activated' and 'deactivated' Lifecycle Hooks