Входные параметры (props)

В Element Plus входные параметры компонентов (props) служат основным способом передачи данных и конфигурации от родительского компонента к дочернему. Они позволяют контролировать состояние компонентов, задавать начальные значения и обеспечивают реактивность интерфейса.

Определение props

Для любого компонента Element Plus можно определить список props в объекте props:

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      required: true
    },
    size: {
      type: String,
      default: 'medium',
      validator: value => ['small', 'medium', 'large'].includes(value)
    }
  }
}

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

  • type — задает тип данных, который компонент ожидает получить.
  • default — значение по умолчанию, если prop не был передан.
  • required — определяет, обязательно ли передавать данный prop.
  • validator — функция проверки, возвращающая true или false в зависимости от допустимости значения.

Типы props

Element Plus поддерживает все стандартные типы Jav * aScript:

  • String — текстовые значения.
  • Number — числовые параметры.
  • Boolean — логические флаги, например, видимость модального окна.
  • Array — массивы для списка данных.
  • Object — объекты для сложной конфигурации.
  • Function — колбэки и обработчики событий.
  • Symbol — редко используемый тип, но полностью поддерживаемый.

Динамическое использование props

Props в Element Plus реактивны, что позволяет обновлять компонент при изменении значения родителем:

Если родитель изменит buttonType, кнопка автоматически изменит свой стиль. Это особенно полезно для таких компонентов, как ElTable, ElForm и ElDialog.

Использование сложных объектов в props

Для компонентов, требующих настройки множества параметров, props часто используют с объектами:

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

Проверка и валидация props

Element Plus позволяет задавать пользовательские функции проверки:

props: {
  size: {
    type: String,
    default: 'medium',
    validator: value => ['small', 'medium', 'large'].includes(value)
  }
}

Невалидные значения будут проигнорированы Vue, что предотвращает некорректное поведение компонентов.

Связывание props с событиями

Некоторые компоненты Element Plus используют синтаксис .sync для двустороннего связывания состояния:


  Текст диалога

При изменении видимости диалога внутри компонента автоматически обновится переменная isDialogOpen в родителе.

Распространённые примеры использования props

  • ElInput: управление значением через v-model или :value.
  • ElSelect: передача списка опций через массив options.
  • ElTable: настройка колонок через массив объектов columns.
  • ElButton: управление типом кнопки через prop type.

Практические советы

  1. Всегда указывайте type для каждого prop — это повышает читаемость и предотвращает ошибки.
  2. Для объектов и массивов используйте функцию при определении default.
  3. Используйте validator для ограничений допустимых значений.
  4. Для флагов видимости (visible) предпочтителен синтаксис .sync.
  5. Старайтесь минимизировать количество необязательных props, чтобы интерфейс компонента оставался предсказуемым.

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

props: {
  simpleProp: String,
  requiredProp: {
    type: Number,
    required: true
  },
  defaultProp: {
    type: Boolean,
    default: false
  },
  validatedProp: {
    type: String,
    validator: val => ['one', 'two', 'three'].includes(val)
  },
  objectProp: {
    type: Object,
    default: () => ({ key: 'value' })
  }
}

Эта структура позволяет создавать гибкие, реактивные и безопасные компоненты с полным контролем над входными параметрами.

Оглавление