Daripada Slot Pemahaman Svelte o Svelte (lalai dan dinamakan)

Terdapat banyak perubahan yang mungkin mengelirukan dalam Svelte 5, itulah sebabnya saya cuba mendokumentasikan proses pembelajaran saya dari Svelte 4 hingga Svelte 5.
Salah satunya menggunakan slot dalam Svelte 5. Ia adalah proses yang lebih mudah dalam <= Svelte 4:

Slot Lalai

Parent.svelte (slot lalai, svelte 4)

<Child>
<div>
// Your slot content
</div>
</Child>




</p>
<p>Child.svelte (slot lalai, svelte 4)<br>
</p>

<pre class="brush:php;toolbar:false"><slot />

Dalam Svelte 5, anda perlu menggunakan sintaks @render untuk memaparkan slot, yang juga anda ambil daripada $props():

baharu

Parent.svelte (slot lalai, svelte 5)

<!-- same as svelte 4 -->
<Child>
<div>
// Your slot content
</div>
</Child>

Child.svelte (slot lalai, svelte 5)

<script>
// destructure children from $props()
const { children } = $props()
</script>
<!-- render default slot here (with optional chaining just in case)-->
{@render children?.()}

---

Dinamakan Slot

Slot bernama juga telah berubah, menggunakan kedua-dua sintaks #snippet dan @render:

Parent.svelte (slot bernama, svelte 4)

<Child>
<div slot="mySlot">
// Your slot content
</div>
</Child>

Child.svelte (bernama slot, svelte 4)

<slot name="mySlot" />

Dalam Svelte 5, anda perlu melepasi slot dengan #snippet, kemudian gunakan sintaks @render untuk memaparkan slot, yang juga anda ambil daripada $props():

baharu

Parent.svelte (slot dinamakan, svelte 5)

<!-- same as svelte 4 -->
<Child>
{#snippet mySlot()}
<div>
// your slot content
</div>
{/snippet}
</Child>

Child.svelte (slot bernama, svelte 5)

<script>
// destructure children from $props()
const { mySlot } = $props()
</script>
<!-- render default slot here-->
{@render mySlot()}

---

Tambahan: Anda juga boleh memaparkan kandungan secara bersyarat berdasarkan jika slot diluluskan dengan blok if:

Child.svelte (slot bernama, svelte 5, render bersyarat)

<script>
// destructure children from $props()
const { mySlot } = $props()
</script>
{#if mySlot}
<p>My Slot Section is rendered here</p>
<!-- render default slot here-->
{@render mySlot()}
{/if}

Saya akan terus mendokumentasikan sebarang perubahan apabila saya menemuinya. By the way, apa pendapat anda tentang Svelte 5? Adakah peningkatan dalam masa penyusunan, pengurangan saiz binaan (untuk projek yang lebih besar) dan ciri tambahan berbaloi dengan kerumitan tambahan?

Selamat Menggoda!

Atas ialah kandungan terperinci Daripada Slot Pemahaman Svelte o Svelte (lalai dan dinamakan). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!