Svelte Tutorial 3: Component Properties (English & Indonesia)

English

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

Indonesia

Property adalah sesuatu yang digunakan untuk memberikan data atau nilai dari suatu komponen ke level komponen di bawahnya (child).

Declaring props

Untuk mendeklarasikan property kita bisa menggunakan keyword export. Sebagai contoh jika kita mempunyai app seperti ini:

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

<Nested answer={42}/>  <!-- undefined jika kita lupa keyword 
                            'export' saat deklarasi answer -->

Kita harus mendeklarasikan answer dengan keyword export di dalam Nested.svelte, jika tidak maka answer tidak akan dikenali di app utama.

<script>
export let answer;
</script>

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

Default value

Kita juga bisa memberikan nilai default pada variable answer dari contoh sebelumnya:

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

Jadi jika kita memanggil nested seperti ini:

<Nested answer={42}/>  <!-- akan mencetak 42 -->
<Nested/>              <!-- akan mencetak 'default' --> 

Spread props

Misalkan kita mempunyai komponen Info.svelte yang memiliki 4 properti (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>

kita bisa memasukkan nilai variabel seperti ini:

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

Akan tetapi daripada memasukan satu-satu, kita juga bisa langsung memasukkan variabel seperti contoh di bawah ini. Tapi satu hal yang perlu diperhatikan nama indeks pkg yang digunakan harus sama dengan di Info.svelte yaitu (name, version, speed, website)

<Info {...pkg}/>