Cara Menggunakan Slot di Svelte

Svelte menawarkan berbagai cara bagi komponen untuk berkomunikasi satu sama lain, termasuk props, slot, dll. Anda perlu mengintegrasikan slot untuk membuat komponen yang fleksibel dan dapat digunakan kembali dalam aplikasi Svelte Anda.

Memahami Slot di Svelte

Slot masuk kerangka Svelte bekerja sama dengan slot di Vue. Mereka menyediakan cara untuk meneruskan konten dari komponen induk ke komponen anak. Dengan slot, Anda dapat menentukan placeholder dalam templat komponen tempat Anda dapat memasukkan konten dari komponen induk.

Konten ini dapat berupa teks biasa, markup HTML, atau komponen Svelte lainnya. Bekerja dengan slot memungkinkan Anda membuat komponen yang sangat dapat disesuaikan dan dinamis yang beradaptasi dengan berbagai kasus penggunaan.

Membuat Slot Dasar

Untuk membuat slot di Svelte, gunakan celah elemen dalam template komponen. Itu

celah elemen adalah pengganti konten yang akan Anda lewati dari komponen induk. Secara default, slot akan merender konten apa pun yang diteruskan ke slot tersebut.

Berikut adalah contoh cara membuat slot dasar:

<main>
 This is the child component
<slot>slot>
main>

Blok kode di atas mewakili komponen anak yang menggunakan elemen slot untuk mendapatkan konten dari komponen induk.

Untuk meneruskan konten dari komponen induk ke komponen anak, pertama-tama Anda harus mengimpor komponen anak ke komponen induk. Lalu, alih-alih menggunakan tag penutup otomatis untuk merender komponen turunan, gunakan tag pembuka dan penutup. Terakhir, di dalam tag komponen, tulis konten yang ingin Anda teruskan dari komponen induk ke anak.

Misalnya:

<script>
 import Component from "./Component.svelte";
script>
<main>
 This is the parent component
<Component>
<span>This is a message from the parent componentspan>
Component>
main>

Selain meneruskan konten dari komponen induk ke anak, Anda dapat menyediakan konten cadangan/default di slot. Konten inilah yang akan ditampilkan slot jika komponen induk tidak meneruskan konten apa pun.

Berikut cara meneruskan konten cadangan:

<main>
 This is the child component
<slot>Fallback Contentslot>
main>

Blok kode ini menyediakan teks "Konten Pengganti" sebagai konten pengganti agar slot dapat ditampilkan jika komponen induk tidak menyediakan konten apa pun.

Melewati Data Lintas Slot Dengan Alat Peraga Slot

Svelte memungkinkan Anda meneruskan data ke slot menggunakan props slot. Anda menggunakan props slot dalam situasi di mana Anda ingin meneruskan beberapa data dari komponen turunan ke konten yang Anda masukkan.

Misalnya:

<script>
 let message = 'Hello Parent Component!'
script>
<main>
 This is the child component
<slotmessage={message}>slot>
main>

Blok kode di atas mewakili komponen Svelte. Dalam naskah tag, Anda mendeklarasikan variabel pesan dan berikan teks "Halo Komponen Induk!" untuk itu. Anda juga meneruskan variabel message ke prop slot pesan. Hal ini membuat data pesan tersedia untuk komponen induk ketika memasukkan konten ke dalam slot ini.

<script>
 import Component from "./Component.svelte";
script>
<main>
 This is the parent component
<Componentlet: message>
<div>
 The child component says {message}
div>
Component>
main>

Itu biarkan: pesan sintaks memungkinkan komponen induk untuk mengakses pesan slot prop yang disediakan oleh komponen anak. Itu div tag pesan variabel adalah data dari pesan penyangga slot.

Perhatikan bahwa Anda tidak dibatasi pada satu props slot, Anda dapat meneruskan beberapa props slot sesuai kebutuhan:

<script>
 let user = {
 firstName: 'John',
 lastName: 'Doe'
 };
script>
<main>
 This is the child component
<slotfirstName={user.firstName}lastName={user.lastName}>slot>
main>

Di komponen induk:

<script>
 import Component from "./Component.svelte";
script>
<main>
 This is the parent component
<Componentlet: firstNamelet: lastName>
<div>
 The user's name is {firstName} {lastName}
div>
Component>
main>

Bekerja Dengan Slot Bernama

Anda dapat menggunakan slot bernama ketika Anda ingin melewati beberapa slot di komponen Anda. Slot bernama memudahkan pengelolaan berbagai slot, karena Anda dapat memberi nama unik pada setiap slot. Dengan slot bernama, Anda dapat membuat komponen kompleks dengan tata letak yang bervariasi.

Untuk membuat slot bernama, lewati a nama menopang ke celah elemen:

<div>
 This is the child component

<p>Header: <slotname='header'>slot>p>
<p>Footer: <slotname='footer'>slot>p>
div>

Dalam contoh ini, ada dua slot bernama, slot diberi nama tajuk dan slotnya diberi nama catatan kaki. Menggunakan celah prop, Anda dapat meneruskan konten ke setiap slot dari komponen induk.

Misalnya:

<script>
 import Component from "./Component.svelte";
script>
<main>
 This is the parent component
<Component>
<spanslot="header">This will be passed to the header slotspan>
<spanslot="footer">This will be passed to the footer slotspan>
Component>
main>

Kode ini menunjukkan bagaimana Anda menggunakan celah prop untuk meneruskan konten ke slot bernama. Yang pertama menjangkau tag, Anda lulus celah menopang dengan nilainya tajuk. Ini memastikan bahwa teks di dalam menjangkau tag akan dirender di tajuk celah. Demikian pula dengan teks di dalamnya menjangkau tandai dengan celah nilai prop catatan kaki akan dirender di catatan kaki celah.

Memahami Penerusan Slot

Penerusan slot adalah fitur di Svelte yang memungkinkan Anda meneruskan konten dari komponen induk melalui komponen pembungkus ke komponen anak. Ini bisa sangat berguna jika Anda ingin meneruskan konten dari komponen yang tidak terkait.

Berikut ini contoh cara menggunakan slot forwarding, buat dulu komponen anaknya:

<main>
 This is the child component
<slotname="message">slot>
main>

Selanjutnya, Anda membuat komponen wrapper:

<script>
 import Component from "./Component.svelte";
script>
<main>
<Component>
<divslot='message'>
<slotname="wrapperMessage">slot>
div>
Component>
main>

Di blok kode ini, Anda memasukkan slot bernama lain ke dalam pesan slot komponen anak.

Kemudian, pada komponen induk, tulis kode ini:

<script>
 import Wrapper from "./Wrapper.svelte";
script>
<main>
 This is the parent component
<Wrapper>
<divslot="wrapperMessage">
 This is from the parent component
div>
Wrapper>
main>

Dalam struktur di atas, konten "Ini dari komponen induk" diteruskan melalui komponen pembungkus dan langsung ke komponen anak berkat wrapperMessage slot di dalam komponen pembungkus.

Jadikan Hidup Anda Lebih Mudah Dengan Slot Svelte

Slot adalah fitur canggih di Svelte yang memungkinkan Anda membuat komponen yang dapat disesuaikan dan digunakan kembali. Anda telah mempelajari cara membuat slot dasar, memberi nama slot, menggunakan alat peraga slot, dll. Dengan memahami berbagai jenis slot dan cara menggunakannya, Anda dapat membangun antarmuka pengguna yang dinamis dan fleksibel.