Why props pass data to children in Svelte - Visual Breakdown

Concept Flow - Why props pass data to children

Parent Component

↓

Child Component

↓

Use props to render or logic

↓

Display updated UI

Data flows from a parent component to a child component through props, allowing the child to use that data for rendering or logic.

Execution Sample

Svelte

<script>
  export let message;
</script>
<p>{message}</p>

Child component receives a 'message' prop and displays it inside a paragraph.

Execution Table

Step	Action	Parent Data	Prop Passed	Child Receives	Rendered Output
1	Parent defines message='Hello!'	message='Hello!'	-	-	-
2	Parent passes message prop to Child	message='Hello!'	message='Hello!'	-	-
3	Child receives message prop	message='Hello!'	message='Hello!'	message='Hello!'	-
4	Child renders <p>{message}</p>	message='Hello!'	message='Hello!'	message='Hello!'	<p>Hello!</p>
5	UI shows rendered output	message='Hello!'	message='Hello!'	message='Hello!'	Hello!

💡 Data passed once; child uses prop to render; no further changes.

Variable Tracker

Variable	Parent Start	After Pass	Child Start	After Render
message	undefined	'Hello!'	'Hello!'	'Hello!'

Key Moments - 2 Insights

Why does the child component need to declare 'export let message;'?

Because in Svelte, declaring 'export let' tells the child to accept that prop from the parent, as shown in execution_table step 3.

What happens if the parent changes the message after initial pass?

The child will automatically update the rendered output because props are reactive, but this example shows only initial pass (step 5).

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'message' in the child at step 3?

A null

B 'Hello!'

C undefined

D '' (empty string)

💡 Hint

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

At which step does the child component render the message inside a paragraph?

A Step 4

B Step 2

C Step 3

D Step 5

💡 Hint

Look at the 'Action' column describing rendering in the execution_table.

If the parent changes 'message' to 'Hi!' after step 5, what happens to the child's rendered output?

A It becomes empty

B It stays 'Hello!'

C It updates to 'Hi!'

D Child throws an error

💡 Hint

Props in Svelte are reactive; see key_moments about updates after initial pass.

Concept Snapshot

Props pass data from parent to child in Svelte.
Child declares 'export let' to receive props.
Parent sets prop values when using child.
Child uses props to render or run logic.
Props are reactive; changes update child automatically.

Full Transcript

In Svelte, data flows from a parent component to a child component using props. The parent defines data, like a message string, and passes it as a prop to the child. The child must declare 'export let' for that prop to receive it. Once received, the child can use the prop to render content, such as showing the message inside a paragraph. This flow is reactive, so if the parent changes the message later, the child updates automatically. The execution table shows each step: parent defines data, passes it, child receives it, renders it, and the UI updates. This helps beginners see how data moves and is used between components.