Passing Props Between Svelte Components

Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62

Subscribe to my email list now at http://jauyeung.net/subscribe/

Svelte is an up and coming front end framework for developing front end web apps.

It’s simple to use and lets us create results fast.

In this article, we’ll look at how to pass data to child Svelte components via props.

Props

We can use the export keyword to create a variable that can be passed into a child within the child component itself.

For example, if App.svelte is the parent and Button.svelte is the child, then we can write the following to pass a value to the text prop of Button:

App.svelte :

<script>  
import Button from "./Button.svelte";  
</script>

<main>  
  <Button text='Toggle' />  
</main>

Button.svelte :

<script>  
export let text;  
</script>

<button>  
  {text}  
</button>

In the code above, we wrote:

export let text;

to indicate that Button takes text as a prop.

Then in App.svelte , we write:

<Button text='Toggle' />

to pass in the string 'Toggle' to Button . Since Button references text between the button tags, we see the word Toggle as the text for the button.

We can set default values of props by setting the value of our export expression as follows:

App.svelte :

<script>  
import Button from "./Button.svelte";  
</script>

<main>  
  <Button text='Toggle' />  
  <Button />  
</main>

Button.svelte :

<script>  
export let text = "Empty Button";  
</script>

<button>  
  {text}  
</button>

In the code above, we set text to 'Empty Button' in Button.svelte .

Therefore, when we have a Button without a text prop passed in, we’ll get that value as the text of the button.

Spread Props

We can use the spread operator to spread an object’s properties into multiple props.

For instance, if we want to pass in more than one prop, we can write the following:

App.svelte ;

<script>  
  import Info from "./Info.svelte"; 
  const person = {  
    name: "Jane Smith",  
    age: 20,  
    gender: "female"  
  };  
</script>

<main>  
  <Info {...person} />  
</main>

Info.svelte :

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

<p>{name} {age} {gender}</p>

In the code above, we have the person object in App.svelte , which spread into the name , age , and gender props via the spread operator.

In Info.svelte , we indicated that name , age , and gender are props. Since they’re passed in from App.svelte , the values will be displayed in the p tag.

So we have Jane Smith 20 female on the screen.

Conversely, if we want to access props that aren’t declared explicitly with export , we can get the values by the $$props variable.

For instance, we can rewrite the example above as:

App.svelte :

<script>  
  import Info from "./Info.svelte"; 
  const person = {  
    name: "Jane Smith",  
    age: 20,  
    gender: "female"  
  };  
</script>

<main>  
  <Info {...person} />  
</main>

Info.svelte :

<p>{$$props.name} {$$props.age} {$$props.gender}</p>

As we can see, we removed all the exports in Info.svelte and just referenced $$props directly in our template markup.

Conclusion

We can pass data from a parent component to a child component by declaring props withexport expressions.

Then we can pass in props from the parent to the child.

If we have lots of props that we want to pass in, we can use the spread operator to spread object properties as props.

Finally, we can use the $$props variable to reference the props that have no export expressions associated with them.