Как задаются props?
Продвинутые темы
Props задаются при использовании компонента как атрибуты: в React — через JSX-атрибуты, в Vue — через атрибуты с `:` для динамических значений. Компонент объявляет ожидаемые props.
В React
Props передаются как атрибуты JSX:
// Передача
<UserCard name="Ann" age={25} isActive={true} onClick={handleClick} />
// Приём (деструктуризация)
function UserCard({ name, age, isActive, onClick }) {
return <div>{name}, {age}</div>;
}- Строки — в кавычках, остальное — в
{}. children— вложенный контент.
<Card>
<p>Содержимое</p> {/* children */}
</Card>В Vue
<!-- Передача -->
<UserCard title="Заголовок" :count="5" :items="list" @click="handleClick" />
<!-- Объявление -->
<script setup>
const props = defineProps(['title', 'count', 'items']);
// или с типами/дефолтами
const props = defineProps({ title: String, count: { type: Number, default: 0 } });
</script>:prop— динамическое значение (выражение), без:— строка.
Общие принципы
- Однонаправленный поток — props идут сверху вниз (родитель → ребёнок).
- Только для чтения — компонент не меняет свои props.
- Валидация — типы, обязательность, значения по умолчанию.
Коротко для собеседования
Props задаются при использовании компонента как атрибуты: React — JSX-атрибуты (<C name="a" age={25} />, строки в кавычках, прочее в {}); Vue — атрибуты с : для динамических значений (:count="5"). Компонент объявляет их (деструктуризация в React, defineProps в Vue). Props — сверху вниз, только для чтения.