Svelte Props

:dart: What You'll Learn

By the end of this lesson, you'll be able to:

• Understand what props are and why we use them
• Pass data from parent to child components
• Use default values for props
• Work with multiple props in a component
• Use object spread syntax to pass many props at once

:information_source: Info What are Props? Sometimes a component needs data from another component. Props (short for properties) let you pass data from a parent component to a child component. In Svelte, we create props by using the export keyword.

:package: How Props Work

To pass data from parent to child components, you must export the variables in the child component. Here's how it works:

app.svelte

<script>
  import Counter from './Counter.svelte'
</script>

<Counter count=\{3\} />

Counter.svelte

<script>
  export let count = 1;
</script>

<p>
  The count is \{count\}
</p>

Let's break down what's happening:

• Parent component (app.svelte): Sends data to the child
• Child component (Counter.svelte): Receives data through props
• Export keyword: Makes the variable available as a prop
• Default value: The child sets count = 1 as a fallback

tip Remember! The parent component can override any default values. In our example, even though Counter.svelte has count = 1, the parent passes count={3} which takes priority.

:emoji: Props with Different Values

You can use the same component multiple times with different prop values:

app.svelte

<script>
  import Counter from './Counter.svelte'
</script>

<Counter count=\{3\} />
<Counter />
<Counter count=\{7\} />

Counter.svelte

<script>
  export let count = 1; // default value
</script>

<p>
  The count is \{count\}
</p>

What happens here:

• First Counter: Gets count={3} from the parent
• Second Counter: No value passed, so it uses the default count = 1
• Third Counter: Gets count={7} from the parent

note When you don't pass a prop value, Svelte uses the default value from the child component.

:bar_chart: Props with Variable Values

You can also pass variables as prop values:

app.svelte

<script>
  import Counter from './Counter.svelte'
  
  let myVariable = 5;
</script>

<Counter count=\{myVariable\} />

Counter.svelte

<script>
  export let count;
</script>

<p>
  The count is \{count\}
</p>

The parent component can pass any variable as a prop value. This makes your components dynamic!

:emoji: Multiple Props

Components can have many props. Just export multiple variables:

app.svelte

<script>
  import Person from './Person.svelte'
</script>

<Person name=\{"Aryan"\} age=\{12\} />

Person.svelte

<script>
  export let name;
  export let age;
</script>

<p>
  My name is \{name\} and I'm \{age\} years old.
</p>

Each exported variable becomes a prop that the parent must provide. The child component can use all these props in its template.

:emoji: Using Object Variables with Props

When you have many props, you can use the spread operator (...) to pass them all at once:

tip Pro Tip! The spread operator saves you from typing each prop individually. It's perfect when you have lots of data to pass!

app.svelte

<script>
  import Person from './Person.svelte'
  
  let myInfo = \{
    name: "Aryan",
    age: 12,
    subject: "coding",
    place: "Telebort"
  \}
</script>

<Person \{...myInfo\} />

Person.svelte

<script>
  export let name;
  export let age;
  export let subject;
  export let place;
</script>

<p>My name is \{name\} and I'm \{age\} years old.</p>
<p>I learn \{subject\} at \{place\}.</p>

The {...myInfo} syntax spreads all properties from the object as individual props. Each property name must match an exported variable in the child component.

:memo: Summary

Let's review what we learned about props:

:white_check_mark: Props pass data from parent to child components
:white_check_mark: Export keyword makes variables available as props
:white_check_mark: Default values provide fallbacks when no value is passed
:white_check_mark: Multiple props let you pass several pieces of data
:white_check_mark: Variables can be passed as prop values for dynamic content
:white_check_mark: Spread syntax ({...object}) passes many props at once
:white_check_mark: Reusable components work with different data through props

:rocket: Practice Time!

Try these exercises to master props:

1. Basic Props: Create a Greeting component that accepts a name prop and displays "Hello, [name]!"
2. Default Values: Make a Button component with a default color prop of "blue"
3. Multiple Props: Build a Card component that accepts title, content, and imageUrl props
4. Object Spread: Create a Profile component and pass user data using the spread operator

note Next Steps Now that you understand props, you're ready to build interactive components that share data! In the next lesson, we'll explore how components can communicate back to their parents.