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