Dynamic Components
Dynamic Components can be used to flip through pages within your page, like tabs in your browser, with the use of the 'is' attribute.
The Component Tag and The 'is' Attribute
To make a dynamic component we use the <component> tag to represent the active component. The 'is' attribute is tied to a value with v-bind, and we change that value to the name of the component we want to have active.
Example
In this example we have a <component> tag that acts as a placeholder for either the comp-one component or the comp-two component. The 'is' attribute is set on the <component> tag and listens to the computed value 'activeComp' that holds either 'comp-one' or 'comp-two' as value. And we have a button that toggles a data property between 'true' and 'false' to make the computed value switch between the active components.
App.vue:
<template>
<h1>Dynamic Components</h1>
<p>App.vue switches between which component to show.</p>
<button @click="toggleValue = !toggleValue">
Switch component
</button>
<component :is="activeComp"></component>
</template>
<script>
export default {
data() {
return {
toggleValue: true
}
},
computed: {
activeComp() {
if(this.toggleValue) {
return 'comp-one'
}
else {
return 'comp-two'
}
}
}
}
</script>
<KeepAlive>
Run the example below. You will notice that changes you make in one component is forgotten when you switch back to it. That is because the component is unmounted and mounted again, reloading the component.
Example
This example is the same as the previous example except the components are different. In comp-one you can choose between 'Apple' and 'Cake', and in comp-two you can write a message. Your inputs will be gone when you return to a component.
To keep the state, your previous inputs, when returning to a component we use the <KeepAlive> tag around the <component> tag.
Example
The components now remember the user inputs.
App.vue:
<template>
<h1>Dynamic Components</h1>
<p>App.vue switches between which component to show.</p>
<button @click="toggleValue = !toggleValue">
Switch component
</button>
<KeepAlive>
<component :is="activeComp"></component>
</KeepAlive>
</template>
The 'include' and 'exclude' Attributes
All components inside the <KeepAlive> tag will be kept alive by default.
But we can also define only some components to be kept alive by using 'include' or 'exclude' attributes on the <KeepAlive> tag.
If we use the 'include' or 'exclude' attributes on the <KeepAlive> tag we also need to give the components names with the 'name' option:
CompOne.vue:
<script>
export default {
name: 'CompOne',
data() {
return {
imgSrc: 'img_question.svg'
}
}
}
</script>
Example
With <KeepAlive include="CompOne">, only the 'CompOne' component will remember its state, the previous inputs.
App.vue:
<template>
<h1>Dynamic Components</h1>
<p>App.vue switches between which component to show.</p>
<button @click="toggleValue = !toggleValue">
Switch component
</button>
<KeepAlive include="CompOne">
<component :is="activeComp"></component>
</KeepAlive>
</template>
We can also use 'exclude' to choose which components to keep alive or not.
Example
With <KeepAlive exclude="CompOne">, only the 'CompTwo' component will remember its state.
App.vue:
<template>
<h1>Dynamic Components</h1>
<p>App.vue switches between which component to show.</p>
<button @click="toggleValue = !toggleValue">
Switch component
</button>
<KeepAlive exclude="CompOne">
<component :is="activeComp"></component>
</KeepAlive>
</template>
Both 'include' and 'exclude' can be used with multiple components by using comma separation.
To show this we will add one more component so that we get three components in total.
Example
With <KeepAlive include="CompOne, CompThree">, both the 'CompOne' and the 'CompThree' components will remember their state.
App.vue:
<template>
<h1>Dynamic Components</h1>
<button @click="compNbr++">
Next component
</button>
<KeepAlive include="CompOne,CompThree">
<component :is="activeComp"></component>
</KeepAlive>
</template>
The 'max' Attribute
We can use 'max' as an attribute to the <KeepAlive> tag to limit the number of components the browser needs to remember the state of.
Example
With <KeepAlive :max="2">, the browser will only remember the user input of the last two visited components.
App.vue:
<template>
<h1>Dynamic Components</h1>
<label><input type="radio" name="rbgComp" v-model="compName" :value="'comp-one'"> One</label>
<label><input type="radio" name="rbgComp" v-model="compName" :value="'comp-two'"> Two</label>
<label><input type="radio" name="rbgComp" v-model="compName" :value="'comp-three'"> Three</label>
<KeepAlive :max="2">
<component :is="activeComp"></component>
</KeepAlive>
</template>