Именованные слоты и слот по умолчанию
Несколько , , сокращённый синтаксис #name
«Именованные слоты и слот по умолчанию» — бесплатный урок Vue Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.
Что такое слоты
Слоты позволяют родительскому компоненту передавать разметку дочернему компоненту. Дочерний компонент определяет, где появится это содержимое, с помощью элемента <slot>. Так во Vue распределяется содержимое.
Слот по умолчанию
<slot> без имени — это слот по умолчанию. Всё, что родительский компонент помещает между тегами компонента, попадёт в этот слот.
<!-- Card.vue -->
<div class="card">
<slot></slot>
</div>Использование слота по умолчанию
Родительский компонент просто помещает содержимое внутрь тегов компонента.
<Card>
<p>This goes into the default slot</p>
</Card>Зачем нужны именованные слоты
У многих компонентов есть несколько точек вставки — например, заголовок, основная часть и нижний колонтитул. Именованные слоты дают каждой области идентификатор, чтобы родительский компонент мог обращаться к ним по отдельности.
Объявление именованных слотов
Добавьте атрибут name к каждому слоту. Компонент может сочетать именованные слоты и один слот по умолчанию без имени.
<!-- Card.vue -->
<div class="card">
<header><slot name="header"></slot></header>
<main><slot></slot></main>
<footer><slot name="footer"></slot></footer>
</div>Заполнение именованных слотов с помощью v-slot
В родительском компоненте оберните содержимое в <template> с директивой v-slot:name, чтобы обратиться к именованному слоту.
<Card>
<template v-slot:header>
<h2>Title</h2>
</template>
<template v-slot:footer>
<button>OK</button>
</template>
</Card>Сокращённая запись с #
У v-slot: есть сокращённая запись: #. Поэтому v-slot:header превращается в #header. Это принятая краткая форма записи.
<Card>
<template #header>
<h2>Title</h2>
</template>
</Card>Содержимое по умолчанию между тегами
Содержимое, размещённое непосредственно между тегами компонента, а не внутри именованного шаблона, попадает в слот по умолчанию. На него также можно явно указать с помощью #default.
<Card>
<p>Implicit default slot content</p>
<template #footer>Footer</template>
</Card>Сочетание неявного и явного содержимого
В одном использовании компонента можно свободно записать содержимое по умолчанию, а именованные слоты передать через шаблоны. Vue направит каждую часть в нужное место по имени.
<Card>
<template #header><h2>Header</h2></template>
Body text right here
<template #footer>Footer</template>
</Card>Порядок отрисовки
Порядок слотов в родительском компоненте не имеет значения — окончательную структуру определяет шаблон дочернего компонента. Содержимое слота всегда появляется там, где дочерний компонент разместил соответствующий <slot>.
Практический компонент разметки
Именованные слоты позволяют создавать повторно используемые каркасы разметки. Один <BaseLayout> может обслуживать любую страницу, принимая слоты для заголовка, боковой панели и основного содержимого.
<!-- BaseLayout.vue -->
<header><slot name="header" /></header>
<aside><slot name="sidebar" /></aside>
<main><slot /></main>Быстрая проверка
Как записывается сокращённая форма v-slot:header?
Повторение
Вы узнали, что слоты распределяют разметку родительского компонента в дочернем. Безымянный <slot> является слотом по умолчанию, а добавление name создаёт именованные слоты. Родительский компонент заполняет их с помощью <template v-slot:name> или сокращённой записи #name, а окончательное размещение определяет шаблон дочернего компонента.
Изучай HTML с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 42
- Уроки
- 156
Часто задаваемые вопросы
Урок «Именованные слоты и слот по умолчанию» бесплатный?
Да — полный текст урока «Именованные слоты и слот по умолчанию» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.
Чему я научусь в уроке «Именованные слоты и слот по умолчанию»?
Несколько , , сокращённый синтаксис #name Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Vue Academy?
Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Именованные слоты и слот по умолчанию»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Vue Academy?
Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Именованные слоты и слот по умолчанию
- Области слотов: передача данных родителю
- Динамические имена слотов
- Резервное содержимое слота и проверка слотов