Что такое Vue Props

vue-props

Основы Props

Props — это входные параметры, которые дочерний компонент получает от родителя

Пример 1: Передача строки

Родительский компонент ParentComponent.vue

<template>
  <ChildComponent message="Привет от родителя!" />
</template>

<script setup>
import ChildComponent from './ChildComponent.vue';
</script>

Дочерний компонент ChildComponent.vue

<template>
  <p>{{ message }}</p>
</template>

<script setup>
defineProps<{
    message: string; // указываем тип данных
}>();
</script>

Результат: на экране появится текст: “Привет от родителя!”

Валидация Props

Можно задавать:

Типы данных
Обязательность (required: true)
Значения по умолчанию (default)

const props = withDefaults(
    defineProps<{
        message: string;
        label?: string // не обязательный параметр
    }>(),
    {
        label: 'Default label' // Значение по умолчанию
    }
);

Передача динамических данных

Родительский компонент:

<template>
  <ChildComponent 
    :user="currentUser" 
    :items="list" 
  />
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const currentUser = ref({ name: 'Александр', age: 31 });
const list = ref(['Vue', 'React', 'Svelte']);
</script>

Дочерний компонент:

<template>
  <div>
    <p>Имя: {{ user.name }}</p>
    <p>Возраст: {{ user.age }}</p>
    <ul>
      <li v-for="item in items" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

<script setup>
defineProps<{
    user: { name: string; age: number };
    items: string[]
}>();
</script>