Передача данных в компонент, директива v-slot в Vueв

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

Виды слотов

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

Default slot (базовые слот)

Родительский компонент App.vue:

App.vue<script>
import User from './components/User.vue';
export default {
  components: {
    User
  }
}
</script>
<template>
  <User>
    <p>Контент попадет в слот</p>
  </User>
</template>

Дочерний компонент User.vue:

components/User.vue<template>
  <div>
    <h3>Заголовок слота</h3>
    <!-- Контент будет вставлен тег slot -->
    <slot></slot>
  </div>
</template>

Named slots (именованный слот)

Родительский компонент App.vue:

App.vue<script>
import User from './components/User.vue';
export default {
  components: {
    User
  }
}
</script>
<template>
  <User>
    <template v-slot:header>
      <h1>Список содрудников</h1>
    </template>
    <template v-slot:default>
      <p>Основной контент</p>
    </template>
    <template v-slot:footer>
      <p>© 2025 Мой сайт</p>
    </template>
  </User>
</template>

Дочерний компонент User.vue:

components/User.vue<template>
  <div class="layout">
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <!-- слот по умолчанию -->
      <slot></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

Scoped slots (слот с данными)

Родительский компонент App.vue:

App.vue<script>
import User from './components/User.vue';
export default {
  data() {
    return {
      users: [
        {name: 'Алексей', age: 28},
        {name: 'Мария', age: 24}
      ],
    }
  },
  components: {
    User
  }
}
</script>
<template>
  <User :items="users">
    <!-- Получаем данные через v-slot -->
    <template v-slot="{ item, index }">
      <p>№{{ index + 1 }}. {{ item.name }} ({{ item.age }})</p>
    </template>
  </User>
</template>

Дочерний компонент User.vue:

components/User.vue<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">
      <!-- Передаем данные item в слот -->
      <slot :item="item" :index="index"></slot>
    </li>
  </ul>
</template>
<script>
export default {
  props: {
    items: Array
  }
}
</script>