Svelte: Props Cheat Sheet

There’s an easy way to pass props to a child component. Just export it !

// Nested.svelte
<script>
  export let answer = 42
</script>
<p>The answer is {answer}</p>
// App.svelte
<script>
  import Nested from './Nested.svelte'
</script>
<Nested/> // Will display: The answer is 42

Tip: You can also use <Nested answer={42}/> to set a default value to a prop that hasn’t been initialized into it’s own component.

When passing multiple props typically as an object of properties, you can spread them to a component instead of specifying each one with ...:

<script>
  import Info from './Info.svelte';
  const pkg = {
    name: 'svelte',
    version: 3,
    speed: 'blazing',
    website: 'https://svelte.dev'
  };
</script>
<Info name={pkg.name} version={pkg.version} speed={pkg.speed} website={pkg.website}/>
<Info {...pkg}/>

Assuming we have exported name, version, and so on in the Info component.