Зачем нужны Slot во Vue?

Зачем нужны Slot во Vue?

Что такое Slots

Slots — это механизм в Vue для передачи контента из родительского компонента в дочерний. Это позволяет делать компоненты гибкими и переиспользуемыми, передавая в них произвольное содержимое.

Slots работают аналогично children в React, но с большей гибкостью и поддержкой именованных слотов.

Проблема без Slots

Без Slots компоненты работают только с фиксированной структурой:

<!-- Плохо: компонент жестко связан со своим содержимым -->
<template>
  <div class="card">
    <h2>{{ title }}</h2>
    <p>{{ description }}</p>
    <button>{{ buttonText }}</button>
  </div>
</template>

Этот компонент неуникален — нельзя вставить свой контент, только менять текст через props.

Решение со Slots

<!-- Card.vue: компонент с Slots -->
<template>
  <div class="card">
    <slot name="header">Default Header</slot>
    <div class="content">
      <slot>Default content</slot>
    </div>
    <div class="footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

Теперь родительский компонент может передавать любой контент:

<!-- Использование -->
<Card>
  <template #header>
    <h2>Custom Header</h2>
  </template>
  
  <p>Any custom content here</p>
  
  <template #footer>
    <button>Save</button>
    <button>Cancel</button>
  </template>
</Card>

Типы Slots

1. Простой слот (unnamed slot)

<!-- Component.vue -->
<template>
  <div>
    <slot></slot>
  </div>
</template>

<!-- Использование -->
<Component>
  <p>Это содержимое попадёт в slot</p>
</Component>

2. Именованные слоты (named slots)

<!-- Layout.vue -->
<template>
  <div class="layout">
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot name="main"></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

<!-- Использование -->
<Layout>
  <template #header>
    <h1>Header</h1>
  </template>
  
  <template #main>
    <p>Main content</p>
  </template>
  
  <template #footer>
    <p>Footer info</p>
  </template>
</Layout>

3. Scoped slots

<!-- List.vue -->
<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      <slot :item="item" :index="item.id">
        {{ item.name }}
      </slot>
    </li>
  </ul>
</template>

<!-- Использование -->
<List :items="users">
  <template #default="{ item, index }">
    <strong>{{ index }}:</strong> {{ item.name }} ({{ item.email }})
  </template>
</List>

Заключение

Slots — это фундаментальный механизм Vue для создания гибких и переиспользуемых компонентов.