Declaring props with export let in Svelte - Step-by-Step Execution

Concept Flow - Declaring props with export let

Start Component

↓

Declare prop with export let

↓

Parent passes value

↓

Prop initialized with passed value

↓

Component uses prop in template

↓

Render output with prop value

The component declares a prop using 'export let'. The parent passes a value, which initializes the prop. The component then uses this prop in its template to render dynamic content.

Execution Sample

Svelte

export let name = "Guest";

<p>Hello, {name}!</p>

This code declares a prop 'name' with a default value 'Guest' and uses it in the template to greet the user.

Execution Table

Step	Action	Prop 'name' Value	Rendered Output
1	Component starts, 'name' declared with default 'Guest'	Guest	Hello, Guest!
2	Parent passes 'name' = 'Alice'	Alice	Hello, Alice!
3	Parent passes 'name' = 'Bob'	Bob	Hello, Bob!
4	No prop passed, uses default	Guest	Hello, Guest!
5	Component unmounts	-	-

💡 Component lifecycle ends or no further prop changes

Variable Tracker

Variable	Start	After 1	After 2	After 3	Final
name	Guest	Guest	Alice	Bob	Guest

Key Moments - 2 Insights

Why does the component show 'Guest' when no prop is passed?

Because 'export let name = "Guest";' sets a default value. The execution_table row 1 and 4 show that when no value is passed, the default 'Guest' is used.

What happens if the parent changes the prop value after initial render?

The component updates the 'name' prop to the new value and re-renders. See execution_table rows 2 and 3 where 'name' changes to 'Alice' and then 'Bob', updating the output.

Visual Quiz - 3 Questions

Look at the execution table, what is the rendered output at step 3?

A Hello, Bob!

B Hello, Guest!

C Hello, Alice!

D Hello, Unknown!

💡 Hint

Check the 'Rendered Output' column at step 3 in the execution_table.

At which step does the prop 'name' first change from its default?

A Step 1

B Step 4

C Step 2

D Step 5

💡 Hint

Look at the 'Prop "name" Value' column in execution_table to see when it changes from 'Guest'.

If the parent never passes a value, what will the variable_tracker show for 'name' after all steps?

A Alice

B Guest

C Bob

D Undefined

💡 Hint

Refer to variable_tracker row for 'name' and consider default value usage.

Concept Snapshot

Declare props in Svelte with 'export let propName = defaultValue;'.
Parent components pass values to these props.
If no value is passed, the default is used.
Props update reactively when parent changes values.
Use props inside the template with curly braces {propName}.

Full Transcript

In Svelte, you declare a property (prop) that a parent component can set by writing 'export let' followed by the prop name and optionally a default value. When the component runs, if the parent passes a value, that value is used. If not, the default value is used. The component then uses this prop in its template to show dynamic content. If the parent changes the prop value later, the component updates automatically. This flow helps components be reusable and dynamic.