🔗

Props in Svelte

Learn component communication through props

📖

What are Props?

Props are a way to pass data from a parent component to a child component. In Svelte 5, props are declared using the $props() rune.

💻

Child Component Example

Here's how you define props in a child component with default values:

<script lang='ts'>

    let { name = 'Thor' } = $props()

</script>

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

Interactive Examples

✅

Passing a Prop

When we pass the name prop, the component uses it:

Hello Svelte!

🔧

Using Default Value

When no prop is passed, the default value ('Thor') is used:

Hello Thor!

💡

Key Concepts

🎯 Props Flow Down

Data flows from parent to child components

🔒 Type Safety

TypeScript ensures props are used correctly

⚙️ Default Values

Props can have fallback default values

🔄 Reactive Updates

Changes to props automatically update the UI