Props всех компонентов

В Naive UI каждый компонент обладает набором props, позволяющих гибко настраивать его поведение, внешний вид и взаимодействие с пользователем. Props — это параметры, передаваемые компоненту при его использовании, которые определяют его состояние, функции и стиль. Разберём наиболее важные аспекты и общие правила работы с props в Naive UI.

Общие принципы props

  1. Типизация Все props в Naive UI строго типизированы. Например, для компонента NButton prop type принимает только определённые строковые значения: 'primary', 'secondary', 'success', 'error', 'warning' и 'info'. Использование неподдерживаемого значения приведёт к ошибке или игнорированию.

  2. Обязательные и необязательные props Некоторые props обязательны для корректного функционирования компонента, другие имеют значения по умолчанию. Например, для NInput проп value можно не указывать, если используется v-model, так как связь со значением будет организована автоматически.

  3. Объекты и функции как props Многие компоненты принимают функции для событий (onClick, onChange) и объекты для конфигураций (options, rules). Это позволяет создавать динамическое поведение и валидацию без вмешательства в внутреннюю реализацию компонента.

Props основных компонентов

Кнопка — NButton

  • type (String) — определяет стиль кнопки (primary, secondary, success, error, warning, info).
  • size (String) — размер кнопки (small, medium, large).
  • disabled (Boolean) — блокирует кнопку.
  • loading (Boolean) — отображает индикатор загрузки.
  • onClick (Function) — функция, вызываемая при нажатии.
  • ghost (Boolean) — делает кнопку прозрачной, сохраняя контур.

Поле ввода — NInput

  • value / v-model (String | Number) — текущее значение поля.
  • placeholder (String) — текст подсказки.
  • type (String) — тип ввода (text, password, textarea и др.).
  • disabled (Boolean) — блокирует ввод.
  • clearable (Boolean) — добавляет возможность очистки значения.
  • onUpdate:value (Function) — реакция на изменение значения.
  • maxlength (Number) — максимальное количество символов.

Флажок — NCheckbox

  • value (String | Number | Boolean) — текущее состояние.
  • checked (Boolean) — определяет, отмечен ли флажок.
  • disabled (Boolean) — блокирует флажок.
  • label (String) — текст рядом с флажком.
  • onUpdate:checked (Function) — обработка изменения состояния.

Селект — NSelect

  • value / v-model — выбранное значение.
  • options (Array) — массив объектов { label, value }.
  • placeholder (String) — подсказка при пустом значении.
  • disabled (Boolean) — блокировка селекта.
  • multiple (Boolean) — разрешение множественного выбора.
  • onUpdate:value (Function) — обработка выбора пользователя.
  • filterable (Boolean) — включение поиска по списку опций.

Таблица — NDataTable

  • columns (Array) — массив объектов, описывающих колонки (title, key, render).
  • data (Array) — массив объектов, представляющих строки таблицы.
  • row-key (String | Function) — уникальный идентификатор строки.
  • pagination (Object) — настройка постраничного отображения.
  • bordered (Boolean) — отрисовка границ таблицы.
  • onUpdate:page (Function) — обработка изменения страницы.

Динамические props

Некоторые props в Naive UI могут принимать функции или вычисляемые значения, что позволяет компоненты адаптировать под динамические данные:

<NButton :disabled="isDisabled" @click="handleClick">
  Нажми меня
</NButton>

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

Наследование и глобальные настройки

Naive UI позволяет задавать глобальные props для группы компонентов через провайдер ConfigProvider. Например, можно определить глобальные размеры всех кнопок и полей ввода, не указывая их отдельно для каждого компонента:

<ConfigProvider :component-props="{ NButton: { size: 'large' }, NInput: { clearable: true } }">
  <App />
</ConfigProvider>

Это упрощает масштабное приложение, где стандартизированы стили и поведение элементов интерфейса.

Ключевые моменты при работе с props

  • Соблюдать типизацию: любые несоответствия типов могут привести к багам.
  • Использовать реактивные значения: props, привязанные к ref или computed, автоматически обновляют компонент.
  • Разделять управление состоянием: v-model для основных значений, props для конфигурации.
  • Динамические функции: события и рендер-функции позволяют компоненту быть максимально гибким.

Если углубляться, каждая категория компонентов имеет свой специфический набор props, но все они подчиняются общим правилам: типизация, обязательность, реактивность и возможность передачи функций для обработки событий. Это создаёт единый и предсказуемый подход к построению интерфейсов на Naive UI.

Оглавление