Props In Svelte – code example

In this article, you will learn about Props in Svelte. Props is short for Properties, and it is used for passing data from one component to another.

How To Pass Data Using Props

In Svelte, it is very easy to pass props compared to React. As you just have to add an export word at the beginning of the variable which you want to pass as props.

User.svelte

<script>
export let name=''
export let age=''
</script>
<h3>
    {name}
</h3>
<h4>
    {age}
</h4>

And you can use this component with props anywhere, you just have to import it and use it.

App.svelte

<script>
	import Card from './User.svelte'
</script>

<User name='Jatin' age=22 />
<User name='John' age=25 />
<User name='Zayn' age=30 />

And this will render the name and age of the user in the DOM.