Svelte Props

A prop passes a piece of data from a parent component down to a child component. Props let one reusable component display different content depending on where it gets placed.

Why Props Matter

A single button component would look useless if it always showed the same fixed label. Props solve this problem by letting each placement of the button supply its own label, color, or any other detail.

Declaring A Prop Inside A Component

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

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

The export keyword marks name as a prop, telling Svelte this value comes from outside the component rather than being defined inside it.

Passing A Prop From A Parent

<!-- App.svelte -->
<script>
  import Greeting from "./Greeting.svelte";
</script>

<Greeting name="Meera" />
<Greeting name="Kabir" />

Each line places a separate copy of Greeting, passing a different name value into each one. The page shows "Hello, Meera" followed by "Hello, Kabir".

Prop Flow Diagram

App.svelte (Parent)
   |
   | passes name="Meera"
   v
Greeting.svelte (Child)
   |
   v
Displays "Hello, Meera"

Setting A Default Value For A Prop

<script>
  export let name = "Guest";
</script>

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

A parent that skips passing a name prop causes the component to fall back to showing "Hello, Guest" instead of showing an empty gap.

Passing Several Props At Once

<!-- ProductCard.svelte -->
<script>
  export let title;
  export let price;
</script>

<h4>{title}</h4>
<p>Price: {price}</p>

<ProductCard title="Notebook" price="120" />
<ProductCard title="Water Bottle" price="350" />

Each ProductCard placement receives its own pair of values, producing two cards with different titles and prices displayed side by side.

Passing A Variable As A Prop

<script>
  let userName = "Aarav";
</script>

<Greeting name={userName} />

Wrapping userName inside curly braces passes the current value of that variable, rather than the literal text "userName" itself. Changing userName later updates the Greeting component automatically.

A Layman Analogy

Think of a prop as filling in a mail-merge template. The template letter stays the same, but each printed copy shows a different recipient name pulled from a list. A component works the same way, keeping its structure fixed while props fill in the changing details.

Passing An Entire Object As Props

Spreading an object directly onto a component tag passes each of its fields as a separate prop, saving you from writing out every field name individually.

<script>
  let product = { title: "Notebook", price: "120" };
</script>

<ProductCard {...product} />

This line works the same as writing title="Notebook" price="120" directly, but scales far better once an object holds many fields or when the object's shape changes over time.

Props Flow One Direction Only

A child component can read a prop but should avoid changing it directly, since the parent remains the true owner of that value. A child needing to update a prop's underlying value should dispatch a component event instead, letting the parent decide how to respond and update its own data.

Key Points

• The export keyword marks a variable as a prop inside a component
• A parent passes props using attribute syntax on the component tag
• A default value covers cases where a parent skips passing a prop
• Props can carry variables, not only fixed text values