Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке `props` у Vue?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Props** у Vue - це *вхідні параметри компонента*, за допомогою яких батько передає дані дочірньому компоненту. **Ключове:** props - це спосіб передати дані «зверху вниз», від батька до дитини, аналог аргументів функції, але для компонентів.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**Props** у Vue - це *вхідні параметри компонента*, за допомогою яких батько передає дані дочірньому компоненту. Простіше кажучи: - **props - це спосіб передати дані «зверху вниз», від батька до дитини.** - Це аналог аргументів функції, але для компонентів. --- ## Простий приклад #### Батько: ```javascript <UserCard :name="userName" :age="28" /> ``` #### Дочірній компонент (`UserCard.vue`): ```javascript <script setup> const props = defineProps({ name: String, age: Number }) </script> <template> <p>{{ name }} - {{ age }} років</p> </template> ``` Тепер дочірній компонент отримує: - `name="Tim"` - `age="28"` --- ## Навіщо потрібні props? Props вирішують декілька завдань: #### Передати дані від батька до дитини Наприклад: текст кнопки, користувача, список товарів, налаштування компонента. #### Робити компоненти універсальними Один компонент - багато варіантів. #### Створювати конфігурацію поведінки Наприклад: `<Modal :open="true" />`. --- ## Як оголошувати props у Vue 3? ### Спосіб 1. Через `<script setup>` - сучасно та зручно ```javascript <script setup> const props = defineProps({ title: String, count: { type: Number, default: 0 }, isActive: Boolean }) </script> ``` Після цього `title`, `count`, `isActive` доступні в шаблоні. --- ### Спосіб 2. Через Options API (старий стиль) ```javascript <script> export default { props: { title: String, count: { type: Number, default: 0 } } } </script> ``` --- ## Типи пропсів Можна описувати: #### Тип ```javascript title: String ``` #### Тип + типове значення ```javascript count: { type: Number, default: 0 } ``` #### Required (обов'язковий) ```javascript user: { type: Object, required: true } ``` #### Валідація ```javascript age: { type: Number, validator: value => value > 0 } ``` --- ## Не можна змінювати props усередині компонента Це важливе правило: неправильно: ```javascript props.count++ ``` правильно: - створити локальну копію або - передавати подію `emit` батьку, щоб він оновив значення --- ## Односторонній потік даних Props ідуть **тільки зверху вниз**: ```javascript Parent → Child ``` Це робить роботу застосунку передбачуваною та зменшує кількість багів. --- ## Приклад: кнопка, що налаштовується через props ```javascript <script setup> const props = defineProps({ label: String, type: { type: String, default: "primary" } }) </script> <template> <button :class="`btn-${type}`">{{ label }}</button> </template> ``` Використання: ```javascript <BaseButton label="Save" type="success" /> ``` --- ## Підсумок (шпаргалка) **Props - це вхідні параметри компонента.** Вони дозволяють: - передавати дані від батька до дитини, - конфігурувати інтерфейс, - робити компоненти універсальними. У Vue 3 props оголошують через: ```javascript defineProps({ ... }) ``` Props *не можна змінювати*, але їх можна валідувати, робити обов'язковими та задавати їм значення за замовчуванням.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.