Slots reference

В библиотеке Element Plus слоты используются для передачи контента внутрь компонентов, позволяя гибко настраивать их отображение. Каждый слот представляет собой область, куда можно вставлять HTML, Vue-компоненты или динамический контент, не изменяя внутреннюю логику компонента.

Типы слотов:

  • Default slot – основной слот, используется для стандартного содержимого компонента.
  • Named slots – именованные слоты позволяют вставлять контент в конкретные части компонента.
  • Scoped slots – слоты с доступом к данным компонента, что делает их динамическими и интерактивными.

Использование default slot

Простейший вариант использования слотов — это передача содержимого по умолчанию:

<el-card>
  <p>Содержимое карточки через default slot</p>
</el-card>

В этом примере тег <p> вставляется в основной слот компонента el-card. Default slot позволяет добавлять текст, HTML и другие Vue-компоненты.

Именованные слоты

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

<el-dialog :visible.sync="dialogVisible">
  <template #header>
    <span>Заголовок диалога</span>
  </template>
  
  <p>Основное содержимое диалога</p>
  
  <template #footer>
    <el-button @click="dialogVisible = false">Закрыть</el-button>
  </template>
</el-dialog>

Здесь используются слоты:

  • header – для заголовка диалога.
  • footer – для нижней панели с кнопками.
  • Default slot (<p>Основное содержимое диалога</p>) – для тела диалога.

Особенности именованных слотов:

  • Обозначаются через #slotName или старый синтаксис <template v-slot:slotName>.
  • Можно комбинировать несколько слотов в одном компоненте.
  • Позволяют легко кастомизировать визуальную часть компонента без изменения его логики.

Scoped slots

Scoped slots дают доступ к данным внутреннего компонента через объект slotProps. Это мощный инструмент для динамического отображения информации:

<el-table :data="tableData">
  <el-table-column prop="name" label="Имя">
    <template #default="{ row }">
      <strong>{{ row.name }}</strong>
    </template>
  </el-table-column>
</el-table>

Здесь:

  • { row } – объект, переданный из el-table-column, доступный внутри слота.
  • Scoped slot позволяет форматировать данные каждой строки по своему усмотрению.

Преимущества scoped slots:

  • Доступ к внутренним данным компонента без изменения его структуры.
  • Возможность динамического формирования содержимого на основе пропсов.
  • Повышение гибкости и повторного использования компонентов.

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

В Element Plus можно создавать слоты динамически через циклы и условия:

<el-tabs v-model="activeName">
  <el-tab-pane
    v-for="tab in tabs"
    :key="tab.name"
    :label="tab.label"
    :name="tab.name"
  >
    <template #default>
      <p>{{ tab.content }}</p>
    </template>
  </el-tab-pane>
</el-tabs>

Здесь:

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

Комбинация именованных и scoped слотов

Element Plus позволяет объединять именованные и scoped слоты для сложных компонентов:

<el-form :model="form">
  <el-form-item label="Имя">
    <template #default="{ form }">
      <el-input v-model="form.name"></el-input>
    </template>
  </el-form-item>
</el-form>
  • Именованный слот default используется для замены стандартного поля ввода.
  • Scoped slot предоставляет доступ к объекту form, что упрощает двустороннюю привязку данных.

Встроенные слоты в компонентах Element Plus

Некоторые компоненты библиотеки предоставляют предопределённые слоты для удобного кастомного оформления:

  • el-dropdown – слот dropdown для кастомного меню.
  • el-select – слоты prefix и suffix для вставки иконок или кнопок.
  • el-table – слот empty для отображения кастомного сообщения при пустых данных.

Пример использования слота empty:

<el-table :data="[]">
  <template #empty>
    <div>Данные отсутствуют</div>
  </template>
</el-table>

Best practices работы со слотами

  1. Использовать именованные слоты для сложных компонентов, чтобы структура оставалась читаемой.
  2. Scoped slots применять для динамического контента, особенно при работе с таблицами, списками и формами.
  3. Не злоупотреблять вложенными слотами, чтобы не усложнять разметку.
  4. Держать слоты максимально независимыми от внешних данных, передавая только необходимые свойства через пропсы.

Заключение

Слоты в Element Plus обеспечивают мощный и гибкий способ кастомизации компонентов. Понимание их типов, возможностей scoped слотов и динамических шаблонов позволяет создавать интерфейсы, легко поддерживаемые и расширяемые, без изменения внутренней логики компонентов.

Оглавление