0Pricing
Vue Academy · Урок

Динамические имена слотов

v-slot:[dynamicName], программный выбор слота, условный вывод слотов

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

Зачем нужны динамические имена слотов

Иногда слот, который нужно заполнить, неизвестен до времени выполнения: он зависит от свойства, state или переменной цикла. Vue позволяет вычислять имя слота с помощью синтаксиса квадратных скобок.

Синтаксис динамического аргумента

Заключите выражение в квадратные скобки после v-slot:. Vue вычислит его, чтобы определить имя целевого слота.

<MyComponent>
  <template v-slot:[dynamicName]>
    Goes into whatever slot dynamicName equals
  </template>
</MyComponent>

Сокращённая запись со скобками

Сокращённая запись # также поддерживает динамические аргументы.

<MyComponent>
  <template #[dynamicName]>
    Dynamic slot content
  </template>
</MyComponent>

Получение имени из state

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

const dynamicName = ref("header");
// later: dynamicName.value = "footer";

Переключение отображаемого содержимого

В сочетании с дочерним компонентом, определяющим несколько именованных слотов, динамические имена позволяют отображать разные области в зависимости от state.

<!-- child has slots: header, body, footer -->
<Panel>
  <template #[activeSection]>
    Active content here
  </template>
</Panel>

Выбор имён из props

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

const props = defineProps({ target: String });
// use props.target inside #[props.target]

Перебор динамических слотов

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

<template
  v-for="col in columns"
  v-slot:[col.name]="{ row }"
>
  {{ row[col.field] }}
</template>

Строчные и допустимые имена

Динамические имена слотов должны вычисляться в допустимые строки. Значение null считается слотом по умолчанию. При использовании встроенных шаблонов избегайте пробелов и символов, недопустимых в именах атрибутов HTML.

const name = condition ? "primary" : null;
// null -> default slot

Условный выбор слота

Тернарное выражение внутри скобок выбирает один из слотов в зависимости от условия прямо в шаблоне.

<Alert>
  <template #[isError ? 'error' : 'info']>
    {{ message }}
  </template>
</Alert>

Пример компонента вкладок

Компонент вкладок может отображать содержимое активной вкладки, вычисляя имя слота на основе идентификатора выбранной вкладки и сохраняя декларативность родительского компонента.

<Tabs>
  <template #[currentTab]>
    {{ tabContent }}
  </template>
</Tabs>

Сохраняйте читаемость

Динамические слоты предоставляют широкие возможности, но могут скрывать смысл кода. Используйте их, когда набор слотов действительно определяется данными; для небольшого фиксированного набора обычные именованные слоты читаются понятнее.

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

Какой синтаксис выбирает слот, имя которого вычисляется во время выполнения?

Повторение

Вы узнали, что динамические имена слотов используют синтаксис v-slot:[expr] или #[expr], чтобы вычислять, какой слот заполнить, на основе props или состояния. Это позволяет создавать настраиваемые оболочки, системы вкладок и вывод столбцов на основе данных.

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

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

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

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

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

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

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

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

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

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

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

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

  1. Именованные слоты и слот по умолчанию
  2. Области слотов: передача данных родителю
  3. Динамические имена слотов
  4. Резервное содержимое слота и проверка слотов
← Назад к Vue Academy