Passing Props Between Svelte Components
Tags: svelte, webdev, programming, javascript
Published: 2021-01-28 21:37:43

**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 with`export` 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.