Как работают компоненты и props в Vue?

Question

Accepted Answer

**Компоненты** — это переиспользуемые, самодостаточные части интерфейса. **Props** — это способ, которым родитель передает данные *вниз* потомку — это типизированные, только для чтения входные данные потомка. ## Определение props в потомке ```vue ``` ## Передача props от родителя ```vue ``` Обратите внимание на разницу: `name="Ann"` передает литеральную строку, а `:age="30"` (с `v-bind`) вычисляет выражение — необходимо для чисел, логических значений, объектов или переменных. Также обратите внимание, что имена props используют `camelCase` в JavaScript, но `kebab-case` в шаблонах (`isAdmin` → `:is-admin`). ## Props — это однонаправленный и только для чтения поток ```js props.name = "Bob"; // ❌ Vue warns — never mutate a prop ``` Данные поступают **вниз** (родитель → потомок). Потомок не должен изменять свои props; если ему нужно что-то изменить, он либо использует локальную копию, либо **отправляет событие**, прося родителя изменить источник ("props вниз, события вверх"). Этот однонаправленный поток делает данные предсказуемыми. ## Props в TypeScript ```vue ``` ## Почему это важно Компоненты + props — это основа архитектуры Vue — вы составляете интерфейсы из переиспользуемых компонентов и конфигурируете их через props. Понимание того, что props — это **однонаправленный и только для чтения поток** (данные вниз, события вверх), — это ключевая концептуальная модель, которая делает приложения Vue предсказуемыми; изменение props или ожидание двусторонней передачи props — классический источник ошибок.