Слоты Vue3 <slot>
Vue3 Options APIВ Vue3 слоты — это механизм, позволяющий родительскому компоненту передавать содержимое дочернему компоненту. Слот можно рассматривать как зарезервированный "заполнитель" в дочернем компоненте, куда родительский компонент может вставить любое содержимое. Таким образом, дочерний компонент может гибко отображать содержимое, переданное от родителя, не изменяя свою собственную структуру.
Базовое использование слотов
Слот по умолчанию
Слот по умолчанию — простейший тип слота. В дочернем компоненте можно использовать<slot>тег для определения слота по умолчанию. Когда родительский компонент использует дочерний компонент, он может вставлять содержимое в этот слот.
Пример
<template>
<div class="child">
<h3>Это заголовок дочернего компонента</h3>
<slot>Содержимое по умолчанию</slot>
</div>
</template>
Пример
<template>
<ChildComponent>
<p>Это содержимое, переданное родительским компонентом</p>
</ChildComponent>
</template>
В родительском компоненте мы можем<ChildComponent>вставить содержимое внутрь тега, и это содержимое заменит<slot>тег в дочернем компоненте. Если родительский компонент не передаёт содержимое, дочерний компонент отобразит<slot>содержимое по умолчанию внутри тега.
Именованные слоты
Именованные слоты позволяют определять несколько слотов в дочернем компоненте и различать их по имени. В родительском компоненте можно использоватьv-slotдирективу, чтобы указать, в какой слот вставлять содержимое.
Пример
<template>
<div class="child">
<header>
<slot name="header">Содержимое заголовка по умолчанию</slot>
</header>
<main>
<slot>Содержимое тела по умолчанию</slot>
</main>
<footer>
<slot name="footer">Содержимое футера по умолчанию</slot>
</footer>
</div>
</template>
Пример
<template>
<ChildComponent>
<template v-slot:header>
<h1>Пользовательское содержимое заголовка</h1>
</template>
<p>Это содержимое тела, переданное родительским компонентом</p>
<template v-slot:footer>
<p>Пользовательское содержимое футера</p>
</template>
</ChildComponent>
</template>
В приведённом выше примере мы определили три слота:header、main(слот по умолчанию) иfooter. Родительский компонент используетv-slotдирективу, чтобы вставить содержимое в соответствующий слот.
Слоты с ограниченной областью видимости
Слоты с ограниченной областью видимости позволяют дочернему компоненту передавать данные родительскому компоненту, а родительский компонент может отображать содержимое на основе этих данных. Это очень полезно, когда нужно настроить логику рендеринга внутри дочернего компонента.
Базовое использование
В дочернем компоненте вы можете использоватьv-bindчтобы передать данные в слот. Затем родительский компонент может использоватьv-slotдирективу, чтобы получить эти данные.
Пример
<template>
<div class="child">
<slot :user="user"></slot>
</div>
</template>
<script>
export default {
data() {
return {
user: { name: 'Alice', age: 25 }
};
}
};
</script>
Пример
<template>
<ChildComponent v-slot="{ user }">
<p>Имя пользователя: {{ user.name }}</p>
<p>Возраст пользователя: {{ user.age }}</p>
</ChildComponent>
</template>
В этом примере дочерний компонент передаётv-bindбудетuserобъект в слот, а родительский компонент используетv-slot="{ user }"чтобы получить этот объект, и отображает содержимое на основеuserdata.
Другие расширения