Що таке пропси у Vue?
Пропси — це спосіб передачі даних від батьківського компонент до дочірнього в Vue.js. Вони визначають інтерфейс компонент, роблячи його переносимим та конфігурованим без жорсткого зв'язування з внутрішнім станом.
Чому Пропси?
- Декомпозиція компонентів. Витягніть логіку та шаблон у окремий компонент, передаючи лише необхідні дані.
- Повторне використання. Один і той же компонент може бути використаний у різних місцях з різними значеннями пропсів.
- Чіткість інтерфейсу. Оголошуючи пропси, ви документуєте очікування компонент та отримуєте статичну перевірку.
Оголошення Пропсів
Options API
export default {
name: "UserCard",
props: {
// обов'язковий, тип String
name: {
type: String,
required: true
},
// необов'язковий, тип Number, значення за замовчуванням
age: {
type: Number,
default: 18
},
// проста валідація
isActive: {
type: Boolean,
validator: value => typeof value === "boolean"
}
}
};Composition API
import { defineComponent } from "vue";
export default defineComponent({
name: "UserCard",
props: {
name: { type: String, required: true },
age: { type: Number, default: 18 },
isActive: Boolean
},
setup(props) {
// props.name, props.age, props.isActive доступні тут
return { props };
}
});Не змінюйте пропси всередині компонент:
пропси є вхідними даними; для внутрішнього стану використовуйте data або ref у Composition API.
Приклад Використання
<template>
<div class="user-card">
<h2>{{ name }}</h2>
<p>Вік: {{ age }}</p>
<p v-if="isActive">Статус: Активний</p>
</div>
</template>
<script>
export default {
props: ["name", "age", "isActive"]
};
</script>Примітка:
У Composition API ви можете деструктуризувати пропси безпосередньо в setup: setup({ name, age, isActive }) { /* … */ }
Кроки для Роботи з Пропсами
1. Оголосіть пропси
Визначте властивість props у компоненті з типом та правилами (обов'язковий, за замовчуванням, валідатор)
2. Передайте значення
У батьківському компоненті використовуйте атрибути: <UserCard name="John" :age="30" :isActive="true" />3
3. Використовуйте всередині
Доступ до пропсів як до реактивних змінних: {{ name }}, {{ age }}.
Рекомендації
- Оголошуйте пропси явно (як об'єкт), щоб активувати типізацію та валідацію.
- Використовуйте значення за замовчуванням для необов'язкових пропсів.
- Якщо вам потрібно перетворити вхідні дані, робіть це в обчислювальних властивостях (computed), а не безпосередньо в пропсах.
Більше в офіційній документації Vue: Документація Vue Props
Зміст
Чому Пропси? Оголошення Пропсів Options API Composition API Приклад Використання Кроки для Роботи з Пропсами Рекомендації
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.