ตรวจสอบค่า slot ด้วย $$slots ใน Svelte3

เมื่ออ่านมาถึงบทนี้ ก็คงจะพอรู้และการใช้งาน 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 ให้คนอื่นรับรู้ด้วยนะครับ ขอบคุณครับ