Props в Vue — как передавать данные от родителя к ребёнку

Props — это способ передать данные из родительского компонента в дочерний в Vue. Можно объявлять props как массив строк (короткий синтаксис) или как объект с типами, значениями по умолчанию и флагом required. Используйте v-bind для динамических значений и помните: дочерний компонент должен считать props как неизменяемые.

Что такое props в Vue

Props (сокращение от «properties», свойства) — это пользовательские атрибуты, через которые родительский компонент передаёт данные дочернему. Поток данных в Vue идёт в одну сторону: сверху вниз — от родителя к ребёнку. Дочерний компонент может читать и отображать props, но не должен напрямую их мутировать.

Коротко: props — это публичный интерфейс компонента. Если нужно изменить данные внутри дочернего компонента, следует либо эмитировать событие вверх, либо использовать локальную копию в data/computed.

Важно

• Props — не замена для глобального состояния (Vuex/Pinia).
• Для двунаправленной связи используйте модель через v-model или emit-события.

Простая передача props — массив строк

Ниже — пример дочернего компонента, который принимает три пропса, объявленных как массив строк. Этот синтаксис удобен, когда все пропсы простые и не требуется проверка типа или значение по умолчанию.

И пример родителя с передачей статических значений:

Динамическая передача через v-bind

Чтобы передать значения из data или computed родителя, используйте директиву v-bind (сокращённо “:”):

Когда значение в родителе меняется, Vue автоматически обновит значение prop в дочернем компоненте — при условии, что вы не мутировали prop в дочернем компоненте напрямую.

Объявление props как объекта — типы, значения по умолчанию и required

Объявление props в виде объекта даёт более чёткую контрактную спецификацию. Вы можете указать ожидаемый тип, значение по умолчанию и пометить prop как обязательный.

Преимущества объектного синтаксиса:

• Ясность: виден ожидаемый тип и значение по умолчанию.
• Помощь при отладке: Vue предупреждает, если обязательный prop не передан.
• Гибкость: можно использовать валидаторы и сложные дефолты (функции для объектов/массивов).

Пример валидатора и дефолта для сложного типа:

props: {
  options: {
    type: Object,
    default: () => ({ pagination: true, pageSize: 10 }),
    validator: (val) => typeof val.pagination === 'boolean'
  }
}

Лучшие практики и распространённые ошибки

1. Не мутируйте props внутри дочернего компонента. Если нужно изменить значение — создайте локальную копию в data или эмитируйте событие:

props: ['count'],
data() { return { localCount: this.count }; }
// или
this.$emit('update:count', newValue)

2. Используйте object-syntax, когда нужен контроль типов, дефолтов и валидация.
3. Для булевых/числовых пропов указывайте тип (Boolean, Number) — иначе HTML-атрибуты будут строками.
4. Если компонент публичный (библиотека), документируйте props и их поведение.

Важно

Ошибка: ожидание реактивности при прямой мутации вложенного объекта в prop. Даже если объект реактивен, следует избегать изменения props напрямую — это ломает одностороннюю модель данных.

Когда props не подходят — альтернативы

• Глобальное состояние (Pinia, Vuex) — когда данные нужны в разных частях приложения.
• provide/inject — для передачи данных глубже по дереву без прокидывания через каждый компонент.
• Event bus (редко, устарело) — лучше избегать.
• v-model / modelValue для двунаправленных связей: используйте схемы update:modelValue + emit.

Ментальные модели и эвристики

• Компонент — чёрный ящик с публичным API. Props — параметры этого API.
• Данные идут сверху вниз. События идут снизу вверх.
• Для простых случаев используйте массивную декларацию props. Для контрактов и библиотек — объект.

Решающее дерево для выбора синтаксиса props

flowchart TD
  A[Нужна быстрая передача простых значений?] -->|Да| B[Используйте массив строк]
  A -->|Нет| C[Нужна валидация/дефолты/required?]
  C -->|Да| D[Используйте объектный синтаксис]
  C -->|Нет| B

Рольовые чек-листы

Разработчик компонента:

• Определил props и их типы.
• Задал дефолты для объектов/массивов через функцию.
• Не мутирует props внутри компонента.
• Документирует поведение props.

Код-ревьюер:

• Проверил, что обязательные props используются корректно.
• Убедился в отсутствии прямых мутаций props.
• Проверил реактивность: используйте computed/emit при необходимости.

Быстрая шпаргалка (cheat sheet)

• Передача строкой:
• Динамическая:
• Объявление: props: [‘a’,’b’] или props: { a: String, b: { type: Number, default: 0 } }
• Валидатор: validator: (v) => / true/false /
• Дефолт для объекта: default: () => ({})

Краткий глоссарий

• Prop: свойство, передаваемое от родителя к ребёнку.
• v-bind: директива для привязки выражения к атрибуту.
• emit: отправка события от ребёнка к родителю.
• provide/inject: механизм передачи зависимостей по дереву компонентов.

Критерии приёмки

• Компонент принимает указанные props и корректно отображает данные.
• Нет прямых мутаций props в коде компонента.
• Если prop required, отсутствие его вызывает предупреждение при разработке.
• Для сложных дефолтов используется функция default.

Краткое резюме

Props — это удобный и явный способ передавать данные вниз по дереву компонентов в Vue. Для простых случаев подходит массив строк, для надёжного API компонентов — объект с типами, дефолтами и валидацией. Всегда помните про однонаправленный поток данных: при необходимости изменения — эмитируйте события или используйте глобальное состояние.

Заметки

• Используйте v-bind для реактивных связей.
• Документируйте публичные props в компонентах, особенно в общих библиотеках.
• Для сложных сценариев рассмотрите provide/inject или глобальное состояние.