Слоты позволяют родительскому компоненту передавать содержимое шаблона дочернему компоненту — это способ создания гибких многократно используемых обёрток (карточки, модалки, макеты), где потребитель контролирует внутреннюю разметку.
<!-- Card.vue -->
<template>
<div class="card">
<slot></slot> <!-- parent's content is injected here -->
</div>
</template>
<!-- parent -->
<Card>
<h2>Title</h2> <!-- this markup fills the slot -->
<p>Any content!</p>
</Card>
Дочерний компонент определяет «отверстие» (<slot>); родитель заполняет его любой разметкой. Это намного гибче, чем передача строк через props.
<!-- Layout.vue -->
<template>
<header><slot name="header"></slot></header>
<main><slot></slot></main> <!-- the default slot -->
<footer><slot name="footer"></slot></footer>
</template>
<!-- parent uses #name (shorthand for v-slot:name) -->
<Layout>
<template #header><h1>My App</h1></template>
<p>Main content (default slot)</p>
<template #footer><small>© 2024</small></template>
</Layout>
Иногда у дочернего компонента есть данные, которые нужны слоту родителя (например, каждый элемент в списке). Слоты с областью видимости предоставляют данные из дочернего компонента шаблону родителя:
<!-- List.vue — exposes each item to the slot -->
<template>
<li v-for="item in items" :key="item.id">
<slot :item="item" :index="index"></slot> <!-- pass data to the slot -->
</li>
</template>
<!-- parent receives the data via v-slot -->
<List :items="users">
<template #default="{ item }">
{{ item.name }} — {{ item.email }} <!-- parent decides how to render each item -->
</template>
</List>
Слоты с областью видимости — ключ к компонентам без рендеринга/headless: дочерний компонент обрабатывает логику (циклы, получение данных, состояние) и позволяет родителю полностью контролировать представление.
Слоты — это механизм распределения содержимого Vue — необходимый для многократно используемых компонентов макета и обёрток.
Именованные слоты обеспечивают несколько точек вставки, а слоты с областью видимости (предоставляющие данные дочернего компонента определённым родителем шаблонам) включают мощные паттерны, такие как компоненты headless и настраиваемые списки/таблицы.
Они делают компоненты Vue композиционными, а не жёсткими.
Библиотека вопросов для IT-собеседований с подробными ответами — от Junior до Senior.
Поддержать