Svelte adalah kerangka kerja JavaScript yang memungkinkan Anda membuat aplikasi web interaktif dengan cara yang efektif. Salah satu fitur penting Svelte adalah slot dan binding.

Slot

Slot adalah placeholder dalam komponen HTML yang dapat digunakan untuk menampung markup internal, sehingga Anda dapat menciptakan struktur DOM terpisah dan menyajikan mereka bersama-sama. Slot akan "digantikan" dengan markup internal yang Anda masukkan dalam tag komponen.

Contohnya, Anda ingin menciptakan komponen DataTable yang memiliki markup internal untuk tabel. Namun, Anda tidak tahu bagaimana memperlihatkan setiap item dan urutan penampilan mereka. Oleh karena itu, Anda dapat menggunakan slot untuk menampilkan markup row dan memberikan data item ke parent.

Binding

Pengikat (binding) adalah cara untuk mengupdate variabel secara programatis atau ketika elemen DOM komponen diupdate. Contohnya, Anda memiliki input yang nilainya diikat dengan variable X, maka jika input berubah, nilai variable X juga akan berubah. Sebaliknya, jika Anda mengupdate nilai variable X secara programatis, maka input juga akan berubah.

Anda juga dapat membandingkan komponen properties:

Sama seperti Anda dapat membandingkan properti elemen DOM, Anda dapat membandingkan properti komponen. Namun, untuk membuat properti komponen, Anda harus menggunakan keyword export.

Menggunakan Slot dan Binding

Jika Anda ingin menggunakan slot dan binding secara bersama-sama, Anda dapat melakukan sebagai berikut:

• Menggunakan slot untuk menampilkan markup internal
• Menggunakan binding untuk mengupdate nilai variable yang diikat dengan slot

Dengan demikian, Anda dapat memperlihatkan nilai variable dari dalam komponen tetapi juga dapat memperlihatkannya dari luar komponen.

Contoh kode:

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

<ContactCard>
 <span slot="name">
 P. Sherman
 </span>

 <span slot="address">
 42 Wallaby Way<br>
 Sydney
 </span>

 <span slot="email">
 [email protected]
 </span>
</ContactCard>

Dalam contoh di atas, kita menggunakan slot untuk menampilkan markup internal dan binding untuk mengupdate nilai variable yang diikat dengan slot.

Dengan demikian, Anda dapat memperlihatkan nilai variable dari dalam komponen tetapi juga dapat memperlihatkannya dari luar komponen.