ตรวจสอบค่า スロットด้วย $$スロットใน Svelet 3

เมื่ออ่านมาถึงบทนี้ ก็คงจะพอรู้และการใช้งาน スロットมาพอสมควรแล้วคราวนี้เรามาลองตรวจค่าจาก スロットกันหน่อย
สืบเนื่องจาก スロットมีการกหนด フォールバックได้ ปัญหาในเรื่องนี้คือ เมื่อเราไม่กไหนดค่าให้ スロットデフォルトแต่ スロットก็ยังค่า フォールバックコンテンツอยู่ดี ถ้่าหากเราต้องการตรวจสอบค่าจาก スロットนั้นก่อนจะทำอย่างไร มาดูกันครับ

/* 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 />

ผลลัพธ์

แต่ถ้าเราอยาก チェックค่า スロットก่อนว่ามีการส่งค่า スロットมาไหมแล้วค่อยแสดง 内容ได้ เราสามารถใช้ $$slotsตรวจสอบค่าได้

/* Comment.svelte */

{#if $$slots.comment}
<div class="discussion">
  <h3>Comments</h3>
  <slot name="comment">
    default slot
  </slot>
</div>
{/if}

ผลลัพธ์

ถ้าเราไม่ได้ส่ง スロットเข้าไปมันก็ไม่แสดง フォールバックコンテンツออกมาแล้ว
ลองไปปรับใช้กันนะครับ
ศึกษาเพิ่มเติมเรื่อง スロットタグได้ที่ slot tag
หากสนใจ スベルトสามารถเรียนรู้การใช้งาน スベルトแบบ 一歩一歩ได้ที่
Svelte: Framework Not Framework — (ตอนที่ 1) แรกรู้จัก
ขอบคุณทุกท่านที่อ่านมาถึงตรงนี้ ถ้าอ่านแล้วรู้มีประโยชน์ ฝากกด 購読するหรือ シェアリンクให้คนอื่นรับรู้ด้วยนะครับ ขอบคุณครับ