Слоты и scoped slots

В библиотеке Element Plus слоты используются для передачи пользовательского контента внутрь компонентов. Они позволяют гибко настраивать отображение и поведение компонентов без необходимости изменять их внутреннюю логику. В Vue 3, на базе которого построен Element Plus, слоты делятся на несколько типов: обычные слоты, именованные слоты и scoped slots.

Обычный слот создаётся внутри компонента с использованием тега <slot>:

<template>
  <el-card>
    <slot></slot>
  </el-card>
</template>

В этом примере любой переданный контент будет отображаться внутри карточки el-card. Такой подход обеспечивает базовую кастомизацию.

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

Именованные слоты позволяют определять несколько областей для контента. Это особенно полезно в сложных компонентах, таких как el-table или el-dialog. Синтаксис выглядит следующим образом:

<template>
  <el-dialog>
    <template #header>
      Заголовок диалога
    </template>
    <template #default>
      Основное содержимое
    </template>
    <template #footer>
      <el-button type="primary">Подтвердить</el-button>
    </template>
  </el-dialog>
</template>

Ключевые моменты:

  • #header, #default и #footer — это имена слотов, определённые самим компонентом.
  • Именованные слоты обеспечивают полный контроль над каждой отдельной частью компонента.
  • Если слот не заполнен, используется контент по умолчанию, определённый внутри компонента.

Scoped Slots

Scoped slots предоставляют возможность передавать в слот данные из компонента родителя. В Element Plus это часто используется в компонентах с динамическими элементами, таких как el-table, el-select, el-menu. Scoped slots позволяют не просто вставить статический контент, а использовать передаваемые значения для динамической генерации интерфейса.

Пример с el-table:

<template>
  <el-table :data="users">
    <el-table-column prop="name" label="Имя">
      <template #default="scope">
        <strong>{{ scope.row.name }}</strong>
      </template>
    </el-table-column>
    <el-table-column prop="age" label="Возраст">
      <template #default="scope">
        {{ scope.row.age }} лет
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      users: [
        { name: 'Алексей', age: 28 },
        { name: 'Мария', age: 34 }
      ]
    }
  }
}
</script>

Особенности:

  • scope.row — доступ к текущей строке таблицы.
  • scope.$index — индекс текущей строки.
  • Любой слот можно переопределить, используя передаваемые данные для создания динамических шаблонов.

Использование слотов в компонентах форм

В компонентах форм, таких как el-form и el-form-item, слоты позволяют полностью кастомизировать поля ввода, кнопки и вспомогательные элементы. Пример с кастомным input:

<el-form :model="form">
  <el-form-item label="Имя">
    <template #default>
      <el-input v-model="form.name" placeholder="Введите имя"></el-input>
    </template>
  </el-form-item>
</el-form>

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

  • Возможность вставлять сложные компоненты внутрь стандартных элементов формы.
  • Сохраняется реактивность и интеграция с валидацией Element Plus.

Динамические scoped slots

Иногда требуется передавать в слот не только данные, но и методы, чтобы управлять поведением дочернего компонента. Пример с el-select:

<el-select v-model="selected">
  <el-option
    v-for="option in options"
    :key="option.value"
    :label="option.label"
    :value="option.value">
    <template #default="{ label, value }">
      <span>{{ label }} ({{ value }})</span>
    </template>
  </el-option>
</el-select>

Особенности:

  • Scoped slot передаёт объект { label, value } каждой опции.
  • Позволяет кастомизировать отображение опций без потери функциональности выбора.

Советы по работе с слотами в Element Plus

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

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

Оглавление