Learning Svelte 4 | props & data flow

Props or properties are how we pass data from our parent components to any children components. Props are critical to making reusable components & creating efficient data flow. Let's take a look at a simple example where we'll see how to declare props in a child component, & pass some data down to it from the parent component...

// parent component
<script>
    import Nested from './Nested.svelte';
</script>

<Nested answer={42}/>

// child component
<script>
    export let answer;
</script>

<p>The answer is {answer}</p>

First lets look at the child component where our props are declared. In Svelte we declare props by creating a variable & then exporting that variable outside of the component. This is how Svelte knows which data to pipe where. We create our prop by declaring

export let propName

. If you want to provide a default value incase one isn't passed down, simply provide a value for that variable:

export let propName = defaultValue

Then we're just displaying the 'answer' variable in our template.

Second, take a look at how we pass our data down to our child component. After importing the child into the parent & displaying it in the template, use the

propName={ propValue }

syntax. You can pass as many values this way, however if you want to pass many values down, it will likely be more efficient to use the spread operator to pass an object to our child.

Let's take a look at a real world example from a svelte project I've built! On this page each row in the content area is a component being reused for each team member. First lets take a look at the Page (or parent component) & how we format our data

// team.svelte (parent component)
<script>
    import Member from '../components/Member.svelte';

    const members = [
        {
            name: "Jacob Stordahl",
            pronouns: "he/him",
            desc: "Jake is a front-end developer, who is deeply passionate about building intuitive User Interfaces using Javascript, HTML, and CSS. His main goal in creating BCS is to help small businesses make their creative goals a tangible reality using digital technologies. When Jake isn't writing code he's probably cruising on his roller skates or cuddling his two kittens. ",
            image: "/jake.jpg"
        },
        {
            name: "Nick Quandt",
            pronouns: "he/him",
            desc: "Nick is a software engineer with a passion for writing scalable solutions in Javascript, TypeScript, and Node.js. Seattle dog dad & outdoor enthusiast. Ask me anything about programming, data, bbq, or cowboy boots!",
            image: "/nick.jpg"
        },
        {
            name: "Taelor Hill",
            pronouns: "they/them",
            desc: "Taelor is an illustrator and graphic designer, focusing primarily in creating and sharing educational content digitally. Their passions include using social media as a vehicle for social change, supporting marginalized communities, and using art as a form of activism. You can usually find them playing with their cats, worrying about all their plants, or baking something sweet.",
            image: "/tae.jpg"
        }
    ];
</script>

<div id="content">
    <h1>meet our team!</h1>
    {#each members as member}
        <Member {...member}>
    {/each}
</div>

In this example, we have an array of objects ('members'), which we can loop over using an

{#each}

block. For each member object, we'll create an instance of our

<Member />

component, and then pass that member object down to said

<Member />

component. Now, let's peak inside the Member component to see how we recieve our data.

    // Member.svelte (child component)
    <script>
    export let name;
    export let pronouns;
    export let desc;
    export let image;
    </script>

    <div class="member-row">
        <div class="frame">
            <img src="{ image }" alt="portrait of { name }">
        </div>
        <div class="text-inner">
            <h2>{ name }</h2>
            <h4>{ pronouns }</h4>
            <p>{ desc }</p>
        </div> 
    </div>

Within the child component, we create and export a variable for each value in our member object that is being passed down. Then we simply display those variables in our template.

Well, that's pretty much it for props in Svelte. You can see how props makes component based development even more appealing. Next time we'll talk about reactivity & state in Svelte; stay tuned!

Blog

Learning Svelte 4 | props & data flow

Jacob Stordahl

Join Our Newsletter. No Spam, Only the good stuff.

Related