Svelte Tutorial 3: Component Properties

Props or properties used when we want to pass data or value from one component to its children.

Declaring props

To declare props we need to use keyword 'export'. For example when we have app like this:

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

<Nested answer={42}/>  <!-- undefined if we forget keyword 
                            'export' when declaring answer -->

We need to declare answer with export keyword in Nested.svelte, otherwise answer will be considered undefined in the app

<script>
export let answer;
</script>

<p>The answer is {answer}</p>

Default value

We can also specify default value of answer from previous example like this:

<script>
export let answer = 'default';
</script>

So if we have something like this:

<Nested answer={42}/>  <!-- will print 42 -->
<Nested/>              <!-- will print default -->

Spread props

Assuming you have Info.svelte component which have 4 props (name, version, speed, website),

<script>
export let name;
export let version;
export let speed;
export let website;
</script>
<p>
The <code>{name}</code> package is {speed} fast.
Download version {version} from <a href="https://www.npmjs.com/package/{name}">npm</a>
and <a href={website}>learn more here</a>
</p>

you can assign value like this:

<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}/>

But instead of specifying one by one, you can also spread value like this, note that index name must be the same with the component.

<Info {...pkg}/>