What is Vue Props?

Basics of Props

Props are the input parameters that the child component receives from the parent

Example 1: Passing a string

Parent component ParentComponent.vue

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

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

Child component ChildComponent.vue

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

<script setup>
defineProps<{
    message: string; // specifying the data type
}>();
</script>

Result: the text appears on the screen: “Greetings from the parent!”

Validation of Props

You can set:

• Data types
• Required (required: true)
• Default values

const props = withDefaults(
    defineProps<{
        message: string;
        label?: string // optional parameter
    }>(),
    {
        label: 'Default label' // Default value
    }
);

Dynamic data transfer

Parent component:

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

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

const currentUser = ref({ name: 'Alex', age: 31 });
const list = ref(['Vue', 'React', 'Svelte']);
</script>

Child component:

<template>
  <div>
    <p>Name: {{ user.name }}</p>
    <p>Age: {{ 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>

One-way data flow

⚠️ Important - Props only work from parent to child. You can’t change them in a child component!

How do I transfer the changes to the parent?

• Use events (emits) (this is the topic of the next lesson)

Conclusion

• Props is the data that the component receives from the outside
• Validation helps to avoid mistakes
• Dynamic props are updated automatically

Homework:

• Create a UserCard component that accepts name, age, and hobbies (array)
• Add validation: age should be a number, and hobbies should be an array of strings.