Props reference

В библиотеке Element Plus каждый компонент имеет набор props — свойств, которые позволяют детально настраивать поведение и внешний вид компонентов. Props задаются при использовании компонента и могут принимать различные типы значений: строки, числа, логические значения, массивы или объекты. Понимание структуры props является ключом к эффективной работе с библиотекой.

Основные принципы работы с props

  1. Дефолтные значения Большинство props имеют заранее определённые значения по умолчанию. Если проп не указан, компонент использует дефолтное значение. Например, для компонента <el-button> проп type по умолчанию равен 'default'.

  2. Типизация props Для корректной работы компонента важно указывать props соответствующего типа. Element Plus поддерживает следующие типы:

    • String
    • Number
    • Boolean
    • Array
    • Object
    • Function

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

  3. Валидация и ограничения Некоторые props имеют ограниченный набор допустимых значений. Например, для el-button проп size может принимать 'large', 'medium' или 'small'. Использование других значений игнорируется компонентом.

Примеры работы с props

Кнопка <el-button>

<el-button 
  type="primary" 
  size="large" 
  :loading="isLoading" 
  :disabled="isDisabled">
  Отправить
</el-button>
  • type: определяет стиль кнопки (primary, success, warning, danger, info, text)
  • size: размер кнопки (large, medium, small)
  • loading: логический prop, включающий анимацию загрузки
  • disabled: блокирует кнопку

Модальное окно <el-dialog>

<el-dialog
  :visible.sync="dialogVisible"
  title="Подтверждение"
  width="50%"
  :before-close="handleClose"
>
  <span>Вы уверены, что хотите продолжить?</span>
</el-dialog>
  • visible.sync: синхронизация видимости модального окна
  • title: заголовок окна
  • width: ширина окна, может быть в процентах или пикселях
  • before-close: функция, вызываемая перед закрытием окна, позволяет выполнить проверки

Специфические props для интерактивных компонентов

Таблицы <el-table>

Props для таблицы позволяют гибко настраивать отображение данных:

  • data (Array) — массив объектов для отображения
  • height (String / Number) — высота таблицы
  • border (Boolean) — отображение границ между ячейками
  • stripe (Boolean) — полосатая таблица
  • default-sort (Object) — настройка сортировки по умолчанию:
<el-table :data="tableData" stripe border :default-sort="{ prop: 'date', order: 'descending' }">
  <el-table-column prop="name" label="Имя" width="180"></el-table-column>
  <el-table-column prop="date" label="Дата"></el-table-column>
</el-table>

Динамическое управление props

Props можно задавать не только статически, но и динамически через привязку к переменным Vue:

<el-input 
  v-model="inputValue" 
  :placeholder="placeholderText" 
  :maxlength="maxLength" 
  :show-word-limit="true">
</el-input>
  • v-model: двусторонняя привязка данных
  • placeholder: динамический текст подсказки
  • maxlength: ограничение длины ввода
  • show-word-limit: отображение счетчика символов

Передача объектов и массивов через props

Некоторые компоненты, такие как селекты <el-select> или таблицы <el-table>, принимают массивы объектов:

<el-select v-model="selectedValue" placeholder="Выберите элемент">
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value">
  </el-option>
</el-select>
  • options — массив объектов с ключами label и value
  • v-for используется для динамического рендеринга опций

Работа с функциями через props

Некоторые props позволяют передавать callback-функции, которые вызываются при определённых событиях:

<el-upload
  :action="uploadUrl"
  :on-success="handleUploadSuccess"
  :before-upload="beforeUploadCheck">
</el-upload>
  • action — URL для загрузки файла
  • on-success — функция, вызываемая после успешной загрузки
  • before-upload — функция проверки файла перед отправкой

Итоговая структура props

  • Простые типы: String, Number, Boolean
  • Коллекции: Array, Object
  • Функции: callbacks для обработки событий
  • Дефолтные значения и ограничения: определяют корректную работу компонента
  • Динамическая привязка: позволяет изменять поведение компонентов в реальном времени

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

Оглавление