LuisLlamas Logo
EN
vuejs-componentes-dinamicos

What are dynamic components in Vue.js and how to use them

  • 3 min
  • Intermediate

In Vue.js, dynamic components are a mechanism that allows us to switch between different components at runtime.

That is, instead of using a fixed component in the code, we want Vue to display a different component depending on the situation.

For example, a section that shows a login, a registration form, or a welcome message. You could use a dynamic component that switches between these three elements when needed.

This is useful in applications where the content or functionality of a section of the interface needs to change dynamically, and Props and Slots are not enough.

Basic usage of dynamic components

The basic usage of dynamic components involves using the <component> element and the is property to determine which component should be rendered.

Let’s see it with an example,

<template>
  <div>
    <h2>Component A</h2>
    <p>This is Component A.</p>
  </div>
</template>
<template>
  <div>
    <h2>Component B</h2>
    <p>This is Component B.</p>
  </div>
</template>
<template>
  <div>
    <button @click="currentComponent = 'ComponentA'">Show Component A</button>
    <button @click="currentComponent = 'ComponentB'">Show Component B</button>
    <component :is="currentComponent"></component>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

const currentComponent = ref('ComponentA');
</script>

In this example:

  • The parent component (ParentComponent) allows switching between ComponentA and ComponentB using buttons.
  • The <component> element with the is property renders the selected component.

Dynamic components with props

Dynamic components can also receive props, allowing specific data to be passed to the component being rendered.

<template>
  <div>
    <h2>Component A</h2>
    <p>Message: {{ message }}</p>
  </div>
</template>

<script setup>
defineProps({
  message: String,
});
</script>
<template>
  <div>
    <h2>Component B</h2>
    <p>Message: {{ message }}</p>
  </div>
</template>

<script setup>
defineProps({
  message: String,
});
</script>
<template>
  <div>
    <button @click="currentComponent = 'ComponentA'">Show Component A</button>
    <button @click="currentComponent = 'ComponentB'">Show Component B</button>
    <component :is="currentComponent" :message="message"></component>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

const currentComponent = ref('ComponentA');
const message = ref('This is a dynamic message.');
</script>

In this example:

  • The components ComponentA and ComponentB receive a prop message.
  • The parent component passes the prop message to the dynamic component.

Dynamic components with slots

Dynamic components can also use slots to allow the insertion of custom content from the parent component.

<template>
  <div>
    <h2>Component A</h2>
    <slot></slot> <!-- Default slot -->
  </div>
</template>
<template>
  <div>
    <h2>Component B</h2>
    <slot></slot> <!-- Default slot -->
  </div>
</template>
<template>
  <div>
    <button @click="currentComponent = 'ComponentA'">Show Component A</button>
    <button @click="currentComponent = 'ComponentB'">Show Component B</button>
    <component :is="currentComponent">
      <p>This is the slot content.</p>
    </component>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

const currentComponent = ref('ComponentA');
</script>

In this example:

  • The components ComponentA and ComponentB have a default slot.
  • The parent component inserts content into the slot of the dynamic component.

Using keep-alive with dynamic components

The <keep-alive> component allows preserving the state of dynamic components when switching between them. This is useful to avoid data loss or resetting animations.

<template>
  <div>
    <button @click="currentComponent = 'ComponentA'">Show Component A</button>
    <button @click="currentComponent = 'ComponentB'">Show Component B</button>
    <keep-alive>
      <component :is="currentComponent"></component>
    </keep-alive>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

const currentComponent = ref('ComponentA');
</script>

In this example:

  • The <keep-alive> component preserves the state of ComponentA and ComponentB when switching between them.

On this page