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

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>
Run Example »

<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.

Run Example »

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>
Run Example »

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>
Run Example »

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>
Run Example »

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>
Run Example »

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>
Run Example »

Vue Exercises

Test Yourself With Exercises

Exercise:

What attribute is used when making dynamic components?

<component :="activeComp"></component>

Start the Exercise