Why props pass data to children in Svelte - See It in Action

Why props pass data to children in Svelte

📖 Scenario: You are building a simple Svelte app that shows a greeting message. The main component will pass the name to a child component using props.

🎯 Goal: Learn how to pass data from a parent component to a child component using props in Svelte.

📋 What You'll Learn

Create a parent component with a variable userName set to 'Alice'

Create a child component that accepts a prop called name

Pass the userName from the parent to the child using props

Display the greeting message in the child component using the passed prop

💡 Why This Matters

🌍 Real World

Passing data with props is how components share information in real Svelte apps, like sending user info or settings from a main page to smaller parts.

💼 Career

Understanding props is essential for building interactive, modular web apps with Svelte, a popular modern framework used in many companies.

1

Create the parent component with a userName variable

In the parent component, create a variable called userName and set it to the string 'Alice'.

Svelte

# Create a variable called userName and set it to 'Alice'

Need a hint?

Use let userName = 'Alice'; to create the variable.

2

Create a child component that accepts a name prop

Create a new Svelte component file named Child.svelte. Inside it, declare a prop called name using export let name;. Then add a paragraph that says Hello, {name}!.

Svelte

let userName = 'Alice';

Need a hint?

Use export let name; to declare the prop in Child.svelte.

3

Pass userName from parent to child using props

In the parent component, import Child.svelte. Then add the <Child /> component and pass the userName variable as the name prop like this: <Child name={userName} />.

Svelte

let userName = 'Alice';

import Child from './Child.svelte';

Need a hint?

Use <Child name={userName} /> to pass the prop.

4

Complete the app to display the greeting message

Make sure the parent component renders the <Child /> component with the name prop. This will show the greeting message Hello, Alice! on the page.

Svelte

let userName = 'Alice';

import Child from './Child.svelte';

Need a hint?

The app is complete when the child component receives the prop and displays the message.