Hack Frontend Community

Что такое слоты (slots) во Vue?

Слоты (англ. slots) — это механизм передачи контента от родительского компонента к дочернему месту (placeholder) внутри шаблона. С их помощью вы создаёте гибкие и переиспользуемые компоненты, позволяя родителю вставлять произвольный контент в заранее определённые области дочернего компонента.

Виды слотов

  1. Default slot — базовый слот без имени.
  2. Named slots — именованные слоты, где у каждого слот‑места своё имя.
  3. Scoped slots — слоты, которые передают данные из дочернего компонента обратно родителю через объект slot props.

Default slot

<!-- ChildComponent.vue -->
<template>
  <div class="wrapper">
    <slot />
  </div>
</template>

<!-- Parent.vue -->
<ChildComponent>
  <p>Привет из родителя!</p>
</ChildComponent>

Named slots

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

<!-- Использование -->
<Layout>
  <template #header>
    <h1>Заголовок страницы</h1>
  </template>

  <p>Основной контент страницы</p>

  <template #footer>
    <p>© 2025</p>
  </template>
</Layout>

Scoped slots

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

<script>
export default {
  props: {
    items: Array
  }
};
</script>

<!-- Parent.vue -->
<List :items="users">
  <template #default="{ item }">
    <strong>{{ item.name }}</strong> — {{ item.age }} лет
  </template>
</List>

Не изменяйте slot props:

Объект slot props доступен только для чтения в шаблоне родителя.

Больше информации в официальной документации Vue: Документация Vue: Слоты