Проп (prop) в Vue — это пользовательский атрибут, который родительский компонент передаёт дочернему компоненту. Пропы — это основной механизм одностороннего потока данных сверху вниз.
[Простая аналогия]
Представьте, что компонент — это функция, а пропсы — это её аргументы. Родитель "вызывает" дочерний компонент, передавая ему данные (аргументы/пропсы), а компонент использует их для своего отображения и логики.
Как это работает на практике:
1. В родительском компоненте вы передаёте данные как атрибут HTML:
< !-- Родительский компонент Parent.vue передаёт проп `title` -->
< template>
< ChildComponent :title="parentTitle" :count="5" />
< /template>
< script>
import ChildComponent from './ChildComponent.vue';
export default {
components: { ChildComponent },
data() {
return { parentTitle: 'Привет от родителя!' }
}
}
< /script>
2. В дочернем компоненте вы явно объявляете пропсы и используете их как обычные переменные:
< !-- Дочерний компонент ChildComponent.vue получает пропсы -->
< template>
< div>
< h1>{{ title }}< /h1> < !-- Используем проп -->
< p>Передано чисел: {{ count }}< /p>
< /div>
< /template>
< script>
export default {
props: {
// Объявление пропа с проверкой типа
title: { type: String, required: true },
// Более простая запись, если проверка не нужна
count: Number
},
mounted() {
console.log(this.title); // Доступно как this.title
}
}
< /script>
[Ключевые характеристики пропсов]
| Характеристика |
Объяснение |
Почему это важно |
| Односторонний поток |
Данные текут только от родителя к ребёнку. Дочерний компонент не может напрямую изменять полученный проп. |
Гарантирует предсказуемость. Источник данных — всегда родитель. |
| Реактивность |
Если родитель изменяет значение пропса, дочерний компонент автоматически получит обновление. |
Изменения синхронизируются без дополнительных усилий. |
| Валидация |
Можно задавать тип (`String`, `Number`, `Array`, `Object`), обязательность (`required: true`), значение по умолчанию (`default`), кастомную функцию-валидатор. |
Помогает избегать ошибок, делает интерфейс компонента понятным для других разработчиков. |
| Передача через v-bind (`:`) |
Динамические значения передаются через `:propName="expression"`. Статичные значения — `propName="staticValue"`. |
`v-bind` или его краткая запись `:` — это именно то, о чём шла речь в описании директив. |
[Пропсы vs локальные данные (`data()`)]
| Пропсы (`props`) |
Локальные данные (`data()`) |
| Получаются извне (от родителя) |
Определяются внутри компонента |
| Нельзя изменять напрямую (рекомендация) |
Можно свободно изменять через `this.имя_данных` |
| Используются для конфигурации компонента, передачи информации |
Используются для внутреннего состояния компонента (флаги, временные данные) |
[Частый паттерн: создание "локальной копии"]
Поскольку напрямую менять проп нельзя, часто создают локальную переменную на его основе:
export default {
props: ['initialCounter'], data() {
return {
localCounter: this.initialCounter // Инициализируем локальные данные пропом
}
}
}
[Почему это важно в контексте `v-bind`]
Директива `v-bind` (или `:`) — это основной способ передачи динамических пропсов. Без неё в атрибут попадёт просто строка "parentTitle", а не значение переменной.
`title="parentTitle"` → Проп получит строку "parentTitle"
`:title="parentTitle"` → Проп получит значение переменной `parentTitle` (например, "Привет от родителя!")
Таким образом, проп — это параметр компонента, а `v-bind` — "инструмент доставки" этого параметра от родителя к ребёнку.
