Skip to content

How to work with props in Svelte

Learn how to work with props in Svelte and let two components with a parent/child relationship communicate with each other

You can import a Svelte component into any other component using the syntax import ComponentName from 'componentPath':

<script>
import SignupForm from './SignupForm.svelte';
</script>

The path is relative to the current component path. ./ means "this same folder". You'd use ../ to go back one folder, and so on.

Once you do so, you can use the newly imported component in the markup, like an HTML tag:

<SignupForm />

In this way, you are forming a parent/child relationship between the two components: the one that imports, and the one that is imported.

Often you want to have the parent component pass data to the child component.

You can do so using props. Props behave similarly to attributes in plain HTML, and they are a one-way form of communication.

In this example we pass the disabled prop, passing the JavaScript value true to it:

<SignupForm disabled={true}/>

In the SignupForm component, you need to export the disabled prop, in this way:

<script>
  export let disabled
</script>

This is the way you express the fact that the prop is exposed to parent components.

When using the component, you can pass a variable instead of a value, to change it dynamically:

<script>
import SignupForm from './SignupForm.svelte';
let disabled = true
</script>

<SignupForm disabled={disabled}/>

When the disabled variable value changes, the child component will be updated with the new prop value. Example:

<script>
import SignupForm from './SignupForm.svelte';
let disabled = true
setTimeout(() => { disabled = false }, 2000)
</script>

<SignupForm disabled={disabled}/>
→ Download my free Svelte Handbook!

THE VALLEY OF CODE

THE WEB DEVELOPER's MANUAL

You might be interested in those things I do:

  • Learn to code in THE VALLEY OF CODE, your your web development manual
  • Find a ton of Web Development projects to learn modern tech stacks in practice in THE VALLEY OF CODE PRO
  • I wrote 16 books for beginner software developers, DOWNLOAD THEM NOW
  • Every year I organize a hands-on cohort course coding BOOTCAMP to teach you how to build a complex, modern Web Application in practice (next edition February-March-April-May 2024)
  • Learn how to start a solopreneur business on the Internet with SOLO LAB (next edition in 2024)
  • Find me on X

Related posts that talk about svelte: