Vue Dynamic Components
Using the ‘is’ attribute, Dynamic Components can be used to navigate between pages on your page, much like tabs in a browser.
The Component Tag and The 'is' Attribute
The <component> element is used to indicate the active component when creating a dynamic component. We use v-bind to attach the ‘is’ property to a value, which we then set to the name of the component we want to be active.
Example
The element in this example serves as a stand-in for either the comp-one or the comp-two <component>. Set on the <component> tag, the ‘is’ attribute watches for the calculated value ‘activeComp’, which may include ‘comp-one’ or ‘comp-two’. Additionally, to enable the computed value to alternate between the active components, we have a button that toggles a data attribute between “true” and “false.”
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 >
Try the following example. When you move back to a component, you’ll find that whatever modifications you make are lost. This is a result of the component being reloaded by being unmounted and then mounted again.
Example
The user inputs are now remembered by the 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>
<KeepAlive>
<component :is="activeComp"></component>
</KeepAlive>
</template>
The 'include' and 'exclude' Attributes
By default, any elements enclosed in the <KeepAlive> tag will remain active.
However, by utilizing the ‘include’ or ‘exclude’ attributes on the <KeepAlive> tag, we may also specify which components should be kept alive solely.
In the event that the <KeepAlive> tag is used with the ‘include’ or ‘exclude’ attributes, the components must additionally be given names using the ‘name’ option:
CompOne.vue:
<script>
export default {
name: 'CompOne',
data() {
return {
imgSrc: 'img_question.svg'
}
}
}
</script>
Example
Only the ‘CompOne’ component will remember its state and the previous inputs when <KeepAlive include=”CompOne”> is used.
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>
‘Exclude’ is another tool we can use to decide which components to leave alive or not.
Example
Only the ‘CompTwo’ component will remember its state when <KeepAlive exclude=”CompOne”> is used.
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>
By employing comma separation, “include” and “exclude” can both be used with numerous components.
We will add one more component to demonstrate this, for a total of three components.
Example
The ‘CompOne’ and ‘CompThree’ components will both remember their states when <KeepAlive include=”CompOne, CompThree”> is used.
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
To reduce the amount of components the browser must remember the state of, we can use the’max’ attribute to the <KeepAlive> element.
Example
The browser will only retain the user input of the previous two components it visits when <KeepAlive:max=”2″> is used.
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>
