LuisLlamas Logo
EN
vuejs-que-son-los-slots

What are Slots and How to Use Them in Vue.js

  • 3 min
  • Beginner

In Vue.js, slots are a mechanism that allows you to inject a fragment of HTML into a component from another parent component.

In other words, it’s as if the child component had a “gap,” where it lets others pass HTML content so that it can display it within itself.

This way, we can reuse our component, which acts as a “picture frame,” for content that can be variable.

For example, imagine you have a component that defines a very elaborate card. Another component can pass it the content that should be displayed inside the card.

Slots are an alternative to Props when we not only need to change certain values but the entire content of the component.

What are slots?

The default slot is the most basic and common. It allows us to insert a single content in one place within the child component.

In the child component, the <slot> tag acts as a “placeholder” that will be replaced by the inserted content.

<template>
  <div class="card">
    <slot></slot> <!-- Default slot -->
  </div>
</template>

<style>
.card {
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 8px;
}
</style>
<template>
  <CardComponent>
    <p>This is the content of the card.</p>
  </CardComponent>
</template>

<script setup>
import CardComponent from './CardComponent.vue';
</script>

In this example:

  • The child component (CardComponent) defines a default slot.
  • The parent component (ParentComponent) inserts content inside the slot.

Named Slots

Named slots are a mechanism that allows a component to offer multiple slots. For this, we will give each slot a unique name (to be able to reference it).

<template>
  <div class="layout">
    <header>
      <slot name="header"></slot> <!-- Slot named "header" -->
    </header>
    <main>
      <slot></slot> <!-- Default slot -->
    </main>
    <footer>
      <slot name="footer"></slot> <!-- Slot named "footer" -->
    </footer>
  </div>
</template>

<style>
.layout {
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 8px;
}
</style>
<template>
  <LayoutComponent>
    <template v-slot:header>
      <h1>Custom Header</h1>
    </template>
    <p>This is the main content.</p>
    <template v-slot:footer>
      <p>Custom Footer</p>
    </template>
  </LayoutComponent>
</template>

<script setup>
import LayoutComponent from './LayoutComponent.vue';
</script>

In this example:

  • The child component (LayoutComponent) defines three slots: header, footer, and a default slot.
  • The parent component (ParentComponent) inserts content into each slot using v-slot.

Scoped Slots

Scoped slots allow passing data from the child component to the parent component. This is useful when the HTML fragment we are inserting also needs to access the content of the component that will insert it in the slot.

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">
      <slot :element="item" :index="index"></slot>
    </li>
  </ul>
</template>

<script setup>
import { ref } from 'vue'

const items = ref(['Apple', 'Banana', 'Cherry', 'Peach'])
</script>
<template>
  <List>
    <template v-slot:default="{ element, index }">
      <strong>{{ index + 1 }}:</strong> {{ element.toUpperCase() }}
    </template>
  </List>
</template>

<script setup>
import ChildComponent from './ChildComponent.vue'
</script>

In this example:

  • The child component (ChildComponent.vue) creates a list of items and exposes each one through the slot using :element and :index.
  • The parent component (App.vue) uses v-slot to receive those data and customize the content of each item.

On this page