Взаимодействие компонентов: родитель и дочерний компонент во Vue 3

🧩 1. Родитель и дочерний компоненты

Во Vue 3 компоненты можно вкладывать друг в друга. Родительский компонент может передавать данные дочернему через props — это способ однонаправленной передачи информации "сверху вниз".

Например, у нас есть карточка пользователя — дочерний компонент UserCard.vue, и родительский компонент App.vue, где мы передаём данные.

💡 2. Дочерний компонент — UserCard.vue

<script setup>
const props = defineProps({
  name: String,
  age: Number,
  city: String
})

withDefaults(props, {
  city: 'Не указан'
})
</script>

<template>
  <div class="user-card">
    <h3>{{ name }}</h3>
    <p>Возраст: {{ age }}</p>
    <p>Город: {{ city }}</p>
  </div>
</template>

<style scoped>
.user-card {
  border: 1px solid #ccc;
  border-radius: 12px;
  padding: 12px;
  margin: 8px 0;
}
</style>

🧠 Что происходит:

• defineProps() — объявляет, какие данные может получать компонент.

• withDefaults() — задаёт значения по умолчанию, если родитель их не передал.

🧠 3. Родительский компонент — App.vue

<script setup>
import UserCard from './components/UserCard.vue'

const user = {
  name: 'Анна',
  age: 28,
  city: 'Москва'
}
</script>

<template>
  <h2>Список пользователей</h2>

  <!-- Передача каждого пропса отдельно -->
  <UserCard name="Иван" :age="32" />

  <!-- Передача сразу всех свойств объекта -->
  <UserCard v-bind="user" />
</template>

🧩 Разбор:

• Когда мы пишем v-bind="user", Vue “раскрывает” объект и передаёт каждое его свойство как отдельный пропс (name, age, city).

• Если в объекте не окажется какого-то поля, дочерний компонент подставит значение из withDefaults.

📘 4. Что получится на экране

Список пользователей

Иван
Возраст: 32
Город: Не указан

Анна
Возраст: 28
Город: Москва

🧭 5. Подведём итог

defineProps() Объявляет входные данные (props) для компонента

withDefaults() Устанавливает дефолтные значения для пропсов

v-bind Передаёт все свойства объекта как пропсы