Component bindings in Svelte - Step-by-Step Execution

Concept Flow - Component bindings

Parent Component

↓

Pass prop to Child

↓

Child Component

↓

Bind prop to variable

↓

User changes input in Child

↓

Update bound variable

↓

Reflect change back in Parent

Shows how a parent passes a value to a child component and binds it so changes in the child update the parent automatically.

Execution Sample

Svelte

/* Parent.svelte */
<script>
  let name = 'Alice';
</script>
<Child bind:name />

/* Child.svelte */
<script>
  export let name;
</script>
<input bind:value={name} />

Parent passes 'name' to Child and binds it so input changes update 'name' in Parent.

Execution Table

Step	Component	Variable	Action	Value After	Effect
1	Parent	name	Initialize	'Alice'	Parent sets name to 'Alice'
2	Parent -> Child	name	Pass and bind	'Alice'	Child receives name='Alice' with binding
3	Child	name	Render input value	'Alice'	Input shows 'Alice'
4	User	name	Change input to 'Bob'	'Bob'	Input value changes, triggers update
5	Child	name	Update bound variable	'Bob'	Child updates name to 'Bob'
6	Parent	name	Reflect change from Child	'Bob'	Parent's name updates to 'Bob'
7	Parent	name	No further changes	'Bob'	Binding keeps values in sync

💡 User stops changing input; binding keeps parent and child variables synchronized.

Variable Tracker

Variable	Start	After Step 4	After Step 6	Final
name (Parent)	'Alice'	'Alice'	'Bob'	'Bob'
name (Child)	'Alice'	'Bob'	'Bob'	'Bob'

Key Moments - 2 Insights

Why does changing the input in Child update the Parent's variable?

Because of the bind:name syntax, the variable is linked both ways. Step 4 and 6 in the execution_table show the input change in Child updates the Parent's 'name'.

What happens if we remove 'bind:' and just pass name as a prop?

The Parent's variable won't update when Child changes input. The binding is one-way then. This is implied by the binding action in Step 2.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'name' in Parent after Step 4?

A undefined

B 'Bob'

C 'Alice'

D '' (empty string)

💡 Hint

Check Step 4 and Step 6: Parent updates only after Step 6, so after Step 4 it is still 'Alice'.

At which step does the Parent's 'name' variable first change to 'Bob'?

A Step 6

B Step 4

C Step 5

D Step 7

💡 Hint

Look at Step 6 in the execution_table where Parent reflects the change from Child.

If the Child input changes to 'Charlie', which steps would reflect this change in the Parent variable?

A Steps 4 and 5 only

B Steps 4, 5, and 6

C Step 3 only

D No steps, Parent won't update

💡 Hint

Binding means input change (Step 4), Child variable update (Step 5), then Parent update (Step 6).

Concept Snapshot

Component bindings in Svelte link parent and child variables.
Use bind:prop to create two-way binding.
Changes in child update parent automatically.
Useful for inputs and shared state.
Without bind:, data flows one-way only.

Full Transcript

This visual execution shows how Svelte component bindings work. The Parent component defines a variable 'name' initialized to 'Alice'. It passes this variable to the Child component using bind:name, which creates a two-way connection. The Child component receives 'name' and binds it to an input's value. When the user changes the input to 'Bob', the Child updates its 'name' variable. Because of the binding, this change reflects back to the Parent's 'name' variable, updating it to 'Bob'. The execution table traces each step, showing variable values and effects. Key moments clarify why binding updates both components and what happens without binding. The quiz tests understanding of when and how variables update during the process.