เมื่ออ่านมาถึงบทนี้ ก็คงจะพอรู้และการใช้งาน slot มาพอสมควรแล้วคราวนี้เรามาลองตรวจค่าจาก slot กันหน่อย
สืบเนื่องจาก slot มีการกหนด fallback ได้ ปัญหาในเรื่องนี้คือ เมื่อเราไม่กไหนดค่าให้ slot default แต่ slot ก็ยังค่า fallback content อยู่ดี ถ้่าหากเราต้องการตรวจสอบค่าจาก slot นั้นก่อนจะทำอย่างไร มาดูกันครับ
/* Comment.svelte */
<div class="discussion">
<h3>Comments</h3>
<slot name="comment">
default slot
</slot>
</div>
/* App.svelte */
<script>
import Comment from "Comment.svelte";
</script>
<Comment>
<span slot="comment">Title Comment</span>
</Comment>
<Comment />
แต่ถ้าเราอยาก check ค่า slot ก่อนว่ามีการส่งค่า named slot มาไหมแล้วค่อยแสดง content ได้ เราสามารถใช้ $$slots
ตรวจสอบค่าได้
/* Comment.svelte */
{#if $$slots.comment}
<div class="discussion">
<h3>Comments</h3>
<slot name="comment">
default slot
</slot>
</div>
{/if}
ถ้าเราไม่ได้ส่ง named slot เข้าไปมันก็ไม่แสดง fallback content ออกมาแล้ว
ลองไปปรับใช้กันนะครับ
ศึกษาเพิ่มเติมเรื่อง slot tag ได้ที่ slot tag
หากสนใจ svelte สามารถเรียนรู้การใช้งาน svelte แบบ step by step ได้ที่
Svelte: Framework Not Framework — (ตอนที่ 1) แรกรู้จัก
ขอบคุณทุกท่านที่อ่านมาถึงตรงนี้ ถ้าอ่านแล้วรู้มีประโยชน์ ฝากกด Subscribe หรือ share link ให้คนอื่นรับรู้ด้วยนะครับ ขอบคุณครับ
Top comments (0)