Can you use several slots in a single component?

VueJunior~1 min read

Yes, you can use several slots in a single component - it's standard practice in Vue.

For that you use named slots.

How do several slots work?

In the child component, you declare several <slot> elements with the name attribute:

Child component (Card.vue)

vue

<template>
  <div class="card">
    <header class="card-header">
      <slot name="header"></slot>
    </header>

    <div class="card-body">
      <slot></slot> <!-- default slot -->
    </div>

    <footer class="card-footer">
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

The parent component can fill each slot

Parent

vue

<Card>
  <template #header>
    <h2>Title</h2>
  </template>

  <p>The card's main text</p> <!-- Default slot -->

  <template #footer>
    <button>OK</button>
  </template>
</Card>

The final result:

header receives <h2>Title</h2>
the default slot receives <p>The card's main text...</p>
footer receives the button

Yes, you can have as many slots as you want

2 slots
5 slots
10 slots

Vue doesn't limit the number; all that matters is:

each named slot has a unique name
the parent uses the matching #slotName

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.

Can you use several slots in a single component?

#How do several slots work?

#Child component (Card.vue)

#The parent component can fill each slot

#Parent

#The final result:

#Yes, you can have as many slots as you want