Чи можна використовувати кілька слотів в одному компоненті?

VueJunior~1 хв читання

Так, в одному компоненті можна використовувати кілька слотів - і це стандартна практика у Vue.

Для цього використовуються іменовані слоти.

Як працює кілька слотів?

У дочірньому компоненті ви оголошуєте кілька <slot> з атрибутом name:

Дочірній компонент (Card.vue)

vue

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

    <div class="card-body">
      <slot></slot> <!-- default слот -->
    </div>

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

Батьківський компонент може заповнити кожен слот

Батько

vue

<Card>
  <template #header>
    <h2>Заголовок</h2>
  </template>

  <p>Основний текст картки</p> <!-- Default слот -->

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

Підсумковий результат:

у header потрапляє <h2>Заголовок</h2>
у default слот - <p>Основний текст...</p>
у footer - кнопка

Так, можна мати скільки завгодно слотів

2 слоти
5 слотів
10 слотів

Vue не обмежує кількість, головне - щоб:

кожен іменований слот мав унікальне ім'я
батько використовував відповідний #slotName

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Чи можна використовувати кілька слотів в одному компоненті?

#Як працює кілька слотів?

#Дочірній компонент (Card.vue)

#Батьківський компонент може заповнити кожен слот

#Батько

#Підсумковий результат:

#Так, можна мати скільки завгодно слотів