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.

Practice

1. What does bind:value do in a Svelte component?

easy

A. It creates a two-way connection between a variable and an input's value.

B. It only sets the initial value of the input without updating.

C. It listens for clicks on the input element.

D. It disables the input field.

Solution

1. Step 1: Understand bind:value usage

   In Svelte, bind:value links a variable to an input's value so changes update both ways.

2. Step 2: Compare options with behavior

   Only It creates a two-way connection between a variable and an input's value. describes this two-way syncing correctly; others describe unrelated behaviors.

3. Final Answer:

   It creates a two-way connection between a variable and an input's value. -> Option A

4. Quick Check:

   Two-way binding = It creates a two-way connection between a variable and an input's value. [OK]

Hint: Remember: bind:value syncs input and variable both ways [OK]

Common Mistakes:

• Thinking bind:value only sets initial value
• Confusing bind:value with event listeners
• Assuming bind:value disables input

2. Which of the following is the correct syntax to bind a parent's variable count to a child's prop value in Svelte?

easy

A.

B. count

C.

D.

Solution

1. Step 1: Recall Svelte binding syntax

   To bind a parent's variable to a child's prop, use bind:prop={variable} syntax.

2. Step 2: Evaluate options

   <Child bind:value={count} /> matches correct syntax. <Child value={count} /> passes value one-way. Options B and D have invalid syntax.

3. Final Answer:

   <Child bind:value={count} /> -> Option D

4. Quick Check:

   Correct bind syntax = <Child bind:value={count} /> [OK]

Hint: Use bind:prop={variable} to sync parent and child [OK]

Common Mistakes:

• Using curly braces without bind:
• Trying to bind without ={}
• Passing value as child content instead of prop

3. Given this Svelte code:

<script>
  let name = 'Alice';
</script>

<Child bind:name />

<!-- Child.svelte -->
<script>
  export let name;
</script>

<input bind:value={name} />

What happens when the user types 'Bob' in the input?

medium

A. An error occurs because bind:name is invalid.

B. Only the child's name updates; parent stays 'Alice'.

C. The parent's name variable updates to 'Bob' automatically.

D. The input value resets to 'Alice' immediately.

Solution

1. Step 1: Understand two-way binding between parent and child

   The parent binds name to child's name prop with bind:name, syncing both variables.

2. Step 2: Input binding updates child's name and propagates to parent

   Typing in input updates child's name, which updates parent's name automatically.

3. Final Answer:

   The parent's name variable updates to 'Bob' automatically. -> Option C

4. Quick Check:

   Two-way bind updates parent and child = The parent's name variable updates to 'Bob' automatically. [OK]

Hint: bind:prop syncs parent and child variables both ways [OK]

Common Mistakes:

• Thinking only child updates
• Expecting input to reset on typing
• Believing bind:name is invalid syntax

4. Identify the error in this Svelte code snippet:

<script>
  let age = 30;
</script>

<Child bind:age></Child>

<!-- Child.svelte -->
<script>
  export let age;
</script>

<input value={age} />

medium

A. The child input should use bind:value={age} for two-way binding.

B. The parent variable age must be a string, not a number.

C. The child component must not export age to bind it.

D. The parent should use bind:age={age} instead.

Solution

1. Step 1: Check child input binding

   The child input uses value={age}, which is one-way binding only.

2. Step 2: Fix to two-way binding for sync

   To sync changes back to parent, child input must use bind:value={age}.

3. Final Answer:

   The child input should use bind:value={age} for two-way binding. -> Option A

4. Quick Check:

   Two-way input binding needed = The child input should use bind:value={age} for two-way binding. [OK]

Hint: Use bind:value on inputs for two-way sync, not value= alone [OK]

Common Mistakes:

• Using value= instead of bind:value= on inputs
• Thinking export let disables binding
• Misusing bind:age syntax on parent

5. You want to create a custom slider component that updates a parent's volume variable as the slider moves. Which approach correctly uses Svelte component bindings to achieve this?

hard

A. In parent: <Slider value={volume} />In Slider.svelte: export let value; and <input type='range' value={value} />

B. In parent: <Slider bind:value={volume} />In Slider.svelte: export let value; and <input type='range' bind:value={value} />

C. In parent: <Slider bind:volume={volume} />In Slider.svelte: export let volume; and <input type='range' bind:value={volume} />

D. In parent: <Slider bind:value />In Slider.svelte: let value; and <input type='range' bind:value={value} />

Solution

1. Step 1: Understand binding prop names

   The parent binds its volume variable to child's value prop using bind:value={volume}.

2. Step 2: Child exports value and binds input's value to it

   The child exports value and uses bind:value={value} on the input for two-way sync.

3. Step 3: Check other options for errors

   In parent: <Slider value={volume} />
   In Slider.svelte: export let value; and <input type='range' value={value} /> uses one-way binding only. In parent: <Slider bind:volume={volume} />
   In Slider.svelte: export let volume; and <input type='range' bind:value={volume} /> mismatches prop names. In parent: <Slider bind:value />
   In Slider.svelte: let value; and <input type='range' bind:value={value} /> misses binding variable in parent.

4. Final Answer:

   Parent binds volume to child's value; child exports value and binds input value. -> Option B

5. Quick Check:

   Matching bind names and two-way input binding = In parent: <Slider bind:value={volume} />
   In Slider.svelte: export let value; and <input type='range' bind:value={value} /> [OK]

Hint: Bind parent's variable to child's exported prop with same name [OK]

Common Mistakes:

• Mismatching prop names between parent and child
• Using one-way binding instead of bind:value
• Not exporting prop in child component