Dynamic Components

❮ Previous Next ❯

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

❮ Previous Next ❯

码农教程 - 一技在手,衣食无忧!

Dynamic Components

The Component Tag and The 'is' Attribute

Example

<KeepAlive>

Example

Example

The 'include' and 'exclude' Attributes

Example

Example

Example

The 'max' Attribute

Example

Vue Exercises

Test Yourself With Exercises

Exercise: