Vue Academy · Урок

Слоты и области слотов

Создавайте гибкие компоненты с помощью слотов и слотов с областью видимости

«Слоты и области слотов» — бесплатный урок Vue Academy на CoddyKit. Это урок 3 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 3 уроков всего.

Что такое слоты

Слоты позволяют родителю вставлять содержимое в шаблон дочернего компонента.

Входные параметры передают данные, а слоты — разметку
Они особенно полезны для обёрток макета, карточек и модальных окон
Дочерний компонент определяет, куда помещается содержимое

Слот по умолчанию

Дочерний компонент определяет место для содержимого с помощью элемента slot. Всё, что родитель помещает между тегами, заполняет это место.

<!-- Card.vue (child) -->
<template>
  <div class="card">
    <slot></slot>
  </div>
</template>

Использование слота по умолчанию

Родитель передаёт содержимое между тегами компонента.

<!-- Parent -->
<Card>
  <h2>Title</h2>
  <p>Any content goes here.</p>
</Card>

<!-- It renders inside the card div -->

Резервное содержимое слота

Слот может содержать резервное содержимое, которое отображается, если родитель ничего не передал.

<!-- Button.vue -->
<template>
  <button>
    <slot>Click me</slot>
  </button>
</template>

<!-- <Button /> shows "Click me";
     <Button>Save</Button> shows "Save" -->

Несколько именованных слотов

Именованные слоты позволяют компоненту предоставить несколько мест для вставки содержимого.

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

Заполнение именованных слотов

Родитель указывает именованный слот с помощью v-slot:name в теге шаблона.

<Layout>
  <template v-slot:header>
    <h1>Site Title</h1>
  </template>

  <p>Main content (default slot)</p>

  <template v-slot:footer>
    <small>Copyright 2024</small>
  </template>
</Layout>

Сокращённая запись v-slot

Для v-slot есть сокращённая запись: символ #.

<Layout>
  <template #header>
    <h1>Title</h1>
  </template>

  <template #footer>
    <small>Footer</small>
  </template>
</Layout>

Слоты с областью видимости

Слоты с областью видимости позволяют дочернему компоненту передавать данные содержимому слота.

Дочерний компонент связывает данные с элементом слота
Родитель получает их в slotProps
Это полезно, когда дочерний компонент управляет данными, а родитель — внешним видом

Передача данных из дочернего компонента

Дочерний компонент связывает атрибуты со слотом, чтобы поделиться данными.

<!-- UserList.vue -->
<template>
  <li v-for="user in users" :key="user.id">
    <slot :user="user"></slot>
  </li>
</template>

Получение данных слота с областью видимости

Родитель получает данные через v-slot.

<UserList>
  <template #default="slotProps">
    {{ slotProps.user.name }}
  </template>
</UserList>

<!-- or destructure: #default="{ user }" -->

Когда использовать каждый слот

Краткое руководство:

Слот по умолчанию — для простой вставки содержимого
Именованные слоты — для нескольких областей макета
Слоты с областью видимости — когда родителю нужны внутренние данные дочернего компонента

Быстрая проверка

Проверьте, насколько хорошо Вы поняли слоты.

Итоги: слоты

Вы изучили распределение содержимого с помощью слотов:

Слот по умолчанию вставляет разметку от родителя
Резервное содержимое отображается, когда ничего не передано
Именованные слоты (v-slot:name, сокращённая запись #) указывают области для вставки
Слоты с областью видимости передают данные дочернего компонента содержимому слота

Далее: основы реактивности.

Часто задаваемые вопросы

Урок «Слоты и области слотов» бесплатный?

Да — полный текст урока «Слоты и области слотов» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 3 уроков всего.

Чему я научусь в уроке «Слоты и области слотов»?

Создавайте гибкие компоненты с помощью слотов и слотов с областью видимости Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 3.

Сколько времени занимает урок «Слоты и области слотов»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Vue Academy