Props for parent to child data in Vue - Step-by-Step Execution

Concept Flow - Props for parent to child data

Parent Component

↓

Child Component

↓

Use props in template or script

↓

Render child with passed data

The parent sends data to the child using props. The child receives and uses this data to render or compute.

Execution Sample

Vue

<template>
  <ChildComponent :message="parentMessage" />
</template>
<script setup>
const parentMessage = 'Hello from Parent'
</script>

Parent passes a message string to ChildComponent via a prop named 'message'.

Execution Table

Step	Action	Parent Data	Prop Passed	Child Receives	Child Renders
1	Parent defines 'parentMessage' = 'Hello from Parent'	parentMessage = 'Hello from Parent'	N/A	N/A	N/A
2	Parent renders <ChildComponent :message='parentMessage' />	parentMessage = 'Hello from Parent'	message = 'Hello from Parent'	N/A	N/A
3	Child receives prop 'message'	parentMessage = 'Hello from Parent'	message = 'Hello from Parent'	message = 'Hello from Parent'	N/A
4	Child renders template using 'message'	parentMessage = 'Hello from Parent'	message = 'Hello from Parent'	message = 'Hello from Parent'	Displays: Hello from Parent

💡 Child renders with the prop value passed from parent; flow ends after rendering.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
parentMessage	undefined	'Hello from Parent'	'Hello from Parent'	'Hello from Parent'	'Hello from Parent'
message (prop in child)	undefined	undefined	'Hello from Parent'	'Hello from Parent'	'Hello from Parent'

Key Moments - 2 Insights

Why does the child component have access to 'message' even though it is defined in the parent?

Because the parent passes 'parentMessage' as a prop named 'message' to the child (see execution_table step 2 and 3). Props are how parents share data with children.

What happens if the parent changes 'parentMessage' after initial render?

The child will automatically receive the updated prop value and re-render with the new data, because props are reactive in Vue (not shown in this static trace but important to know).

Visual Quiz - 3 Questions

Look at the execution_table at step 3, what value does the child receive for 'message'?

A 'Hello from Parent'

B undefined

C null

D An empty string

💡 Hint

Check the 'Child Receives' column at step 3 in the execution_table.

At which step does the parent pass the prop to the child?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at the 'Prop Passed' column in the execution_table.

If the parentMessage changed to 'Hi there!' after step 1, what would the child render at step 4?

A Hello from Parent

B undefined

C Hi there!

D Error

💡 Hint

Props are reactive; the child renders the current prop value (see variable_tracker for parentMessage).

Concept Snapshot

Props let a parent send data to a child component.
Parent passes data using :propName="value" syntax.
Child declares props to receive them.
Child uses props in template or script.
Props are reactive and update child on change.

Full Transcript

In Vue, a parent component can send data to a child component using props. The parent defines a variable, for example 'parentMessage', and passes it to the child using the syntax :message="parentMessage". The child component receives this data as a prop named 'message'. The child can then use this prop in its template to display or use the data. This flow is reactive, so if the parent changes the data, the child updates automatically. The execution steps show the parent defining data, passing it as a prop, the child receiving it, and finally rendering it. Variables like 'parentMessage' and 'message' track the data as it moves from parent to child.