Readonly props in Svelte - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does it mean when a prop is readonly in Svelte?

A readonly prop is a property passed from a parent component that the child component cannot change. It is fixed and only the parent can update it.

beginner

How do you declare a prop in Svelte that should not be changed inside the child component?

You declare the prop with export let in the child component and simply avoid changing it. Svelte does not allow direct reassignment of props inside the child.

intermediate

Why is it important to treat props as readonly in Svelte components?

Treating props as readonly keeps data flow clear and predictable. It prevents bugs by ensuring only the parent controls the data, while the child just uses it.

intermediate

What happens if you try to assign a new value to a prop inside a Svelte child component?

Svelte will give a compile-time warning or error because props are readonly inside the child. You should not reassign them directly.

intermediate

How can a child component communicate changes back to the parent if props are readonly?

The child can send events to the parent using createEventDispatcher. The parent listens and updates the prop value, which flows back down.

In Svelte, how do you receive a prop in a child component?

A Using <code>export let propName</code>

B Using <code>import propName</code>

C Using <code>this.propName</code>

D Using <code>props.propName</code>

In Svelte, props are declared with export let to receive values from the parent.

What happens if you try to change a prop value inside a Svelte child component?

A It updates the parent prop automatically

B Svelte throws a compile-time warning or error

C The prop changes only inside the child

D Nothing happens, it works fine

Props are readonly in Svelte child components. Changing them causes a warning or error.

How can a child component notify the parent about a change if props are readonly?

A By directly changing the prop

B By using global variables

C By using <code>createEventDispatcher</code> to send events

D By importing the parent component

The child uses createEventDispatcher to send events the parent listens to and updates props.

Why should props be treated as readonly in Svelte?

A Because Svelte does not allow props at all

B To allow child components to control parent data

C To make components slower

D To keep data flow clear and avoid bugs

Readonly props keep data flow predictable and prevent bugs by avoiding unexpected changes.

Which of these is the correct way to declare a prop named 'title' in a Svelte component?

A <code>export let title;</code>

B <code>let title;</code>

C <code>const title = 'default';</code>

D <code>import title from 'parent';</code>

Props are declared with export let to receive values from the parent component.

Explain how readonly props work in Svelte and why they are important.

Think about who owns the data and how changes should flow.

Describe how a child component can communicate a change back to the parent when props are readonly.

Focus on event communication between components.