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

Крупный план руки, держащей наклейку Vue.js

Краткое введение

Одной из ключевых особенностей Vue является модульная архитектура: приложение строится из маленьких переиспользуемых компонентов. Props — базовый механизм передачи данных сверху вниз (unidirectional data flow). Они позволяют хранить состояние на уровне родителя и делать дочерние компоненты детерминированными и тестируемыми.

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

Что такое props в Vue?

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

Определение props выполняет несколько задач:

документирует интерфейс компонента для команды;
задаёт ожидаемые типы и значения по умолчанию;
помогает ловить ошибки во время разработки (console warnings);
улучшает переиспользуемость компонентов.

Краткое определение термина:

prop: именованное входное свойство компонента, переданное родителем.

Принципы работы (умственная модель)

Представьте иерархию: родитель владеет данными и передаёт их вниз через props. Если дочерний компонент хочет сообщить об изменениях — он эмитит событие, а родитель реагирует и обновляет свои данные. Это поддерживает единый источник правды (single source of truth).

Полезная метафора: props — это аргументы функции. Компонент — это функция от входных данных: при одних и тех же props поведение и вывод компонента предсказуемы.

Примеры: передача props (исходные примеры)

Ниже — оригинальные примеры кода, показывающие передачу статических и динамических пропсов.

Пояснение: этот ребёнок принимает три пропса и отображает их через интерполяцию.

Это статическая передача значения. Для реактивности используйте v-bind:

Когда data родителя меняется, v-bind обновит prop автоматически.

Определение props как объекта — зачем и как

Определять props в виде объекта удобнее для валидации и документации. В объекте можно указать type, default, required и validator.

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

Явная типизация помогает найти ошибки раннее;
Значения по умолчанию гарантируют корректный рендер, если проп не передан;
required помогает фиксировать нарушения контрактов компонентов.

Дополнительные возможности валидации

Вы можете использовать validator для сложных проверок, а также указывать Array, Object, Boolean, Number, Date и Function в type. Для сложных объектов часто указывают shape (в Vue это вручную через validator) или используют TypeScript для гарантированной типизации.

Пример validator:

props: {
  status: {
    type: String,
    validator(value) {
      return ["loading", "success", "error"].includes(value);
    }
  }
}

Реактивность и ограничения

Если проп — это примитив (string, number, boolean), дочерний компонент не должен пытаться изменить его напрямую.
Если проп — это объект или массив, дочерний компонент может менять его поля, так как это ссылка на один объект. Это может привести к неожиданным побочным эффектам. Рекомендуется создавать локальную копию перед модификацией: const localX = reactive({ …props.x }) или используя computed / toRef.

Пример: копирование объекта для локальной модификации

setup(props) {
  const localCopy = reactive({ ...props.user });
  // теперь можно менять localCopy без изменения props.user
}

Important: не мутируйте props напрямую — Vue выдаст предупреждение в режиме разработки.

Когда props — не лучшее решение (контрпримеры)

Когда нужно глобальное состояние (а не локальное между близкими компонентами) — используйте Pinia/Vuex.
Когда несколько далёких компонентов должны общаться — рассмотрите provide/inject или глобальный стор.
Когда требуется двунаправленная синхронизация сложных структур — рассмотрите pattern emit + обновление в родителе; .sync и v-model могут быть полезны, но их следует использовать осознанно.

Альтернативные подходы и их место

provide / inject — удобно передавать зависимости глубоко вниз без проброса prop через промежуточные компоненты;
Сторы (Pinia/Vuex) — для глобального состояния, shared logic и time-travel debugging;
Event Bus (не рекомендуется в крупных приложениях) — может упростить, но усложняет трассировку.

Best practices и правила команды (чеклист)

Для разработчика:

Документируйте каждый prop: тип, требуется ли, значение по умолчанию, допустимые значения.
Используйте объектную форму props для всех публичных компонентов.
Не мутируйте props. Если нужно локальное состояние — копируйте или создавайте computed.
Минимизируйте количество пропсов: чаще передавайте объект с нужными подполями.

Для ревьюера:

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

Для QA:

Тестируйте реактивность: изменение в родителе должно отражаться у ребёнка.
Тестируйте поведение при отсутствующих опциональных props (дефолты).

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

Компонент принимает документацию props и валидацию типов.
Никакой проп не мутируется внутри дочернего компонента.
Поведение компонента одинаково при статической и динамической передаче props.
Покрытие тестами: рендер с дефолтами, с корректными и некорректными типами, реакция на изменение props.

Шаблон SOP: добавление нового публичного prop

Добавить запись в props объект с type, required/optional и default.
Обновить документацию компонента (README или Storybook).
Написать unit-тесты для рендера и для validator.
Провести код-ревью и прогон E2E, если prop влияет на взаимодействие.
Обновить changelog и bump версии компонента.

Отладка — распространённые ошибки и их решения

“Avoid mutating a prop directly” — значит вы меняете prop в дочернем компоненте. Решение: копировать значение в локальное состояние или эмитить событие к родителю.
Значение не обновляется — проверьте, используется ли v-bind (:) при передаче динамических данных.
Тип не совпадает — проверьте props.type и формат данных в родителе.

Особенности при миграции Vue2 → Vue3

В Vue3 синтаксис props остался похожим, но Composition API даёт более гибкие инструменты (toRefs, toRef, reactive). При миграции приведите код к pattern, который использует реактивные ссылки, чтобы избежать проблем с reactive/readonly.

Приватность: примеры с email

В примерах используются адреса электронной почты (user0000@example.com). В реальном проекте не храните реальные личные данные в виде plain-text в репозитории или в публичных storybook-сценариях. Для тестов используйте фиктивные адреса.

Маленькая памятка — часто используемые паттерны

Передать функцию в качестве prop (callback): используйте type: Function;
Передать обработку событий: ребёнок эмитит событие this.$emit(‘update’, payload) → родитель слушает @update=”handler”;
.sync (шаблон): — обратите внимание на правила и понятность API;

Краткий пример с emit (добавление событий вместо мутации)

Родитель:

Edge-case галерея (что учитывать)

Передаёте большой объект: подумайте о производительности и используйте shallowRef/readonly;
Параметры функции: не передавайте нестабильные анонимные функции в пропсах при большом количестве ререндера — мемоизируйте их;
SSR: убедитесь, что дефолты не зависят от window/current time, иначе возможны расхождения между сервером и клиентом.

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

Объявление простых props: props: [‘title’]
Объявление с типом: props: { title: { type: String, default: ‘Hi’ } }
Required prop: { email: { type: String, required: true } }
Validator: { status: { validator(v) { return [‘ok’,’err’].includes(v) } } }

Резюме

Props — основной способ передачи данных сверху вниз в Vue.
Для простых случаев подойдёт массив строк; для публичных компонентов используйте объект с типами и дефолтами.
Не мутируйте props — используйте emit / локальные копии / сторы.

Important: правильная валидация и документация props повышают качество кода и упрощают сопровождение проекта.