เจาะช่อง Paste Content ให้ตรงตำแหน่งด้วย Named slot ใน svelte3

ปกติแล้วเวลาเราจะ pass custom content ไปให้ slot ใช้งาน เราจะก็วางโครง content ของเราเอง แล้ว pass custom content ไปทั้งหมด 😂 คราวนี้ถ้า slot เรามีการวางโครงสร้างแบบชัดเจน เช่น มี title มี sub title มี content ซึ่ง component มีการวางโครง slot ไว้แล้ว เวลาเราส่ง content เข้าไปมันก็จะไม่เข้าไปที่ slot เพราะว่ามีการกหนดชื่อ slot ไว้ เวลาเราส่ง เราต้องบอกชื่อ slot ด้วย ว่าจะให้ไปลงตำแหน่งไหน

สมมุติว่าเรามีการวางโครง slot ไว้แบบนี้ เป็น ContactCard ง่าย

/* ContactCard.svelte */

<article class="contact-card">
  <h2>
    <slot name="name">
    <span class="missing">ไม่รู้จัก name</span>
    </slot>
  </h2>

  <div class="address">
     <slot name="address">
    <span class="missing">ไม่รู้จัก address</span>
     </slot>
  </div>

  <div class="email">
     <slot name="email">
    <span class="missing">ไม่รู้จัก email</span>
     </slot>
  </div>
</article>

จากตัวอย่างเรามีการ เจาะช่องเพื่อวาง content ตามที่เราต้องการ พร้อมกำหนดชื่อไว้อย่างชัดเจน มี name address และ email ดังภาพ

แต่ละ slot มีการทำ content fallback ไว้ด้วย ถ้าเกิดเราไม่ได้ pass content ให้ตรงตามชื่อ slot มันจะเอา content fallback ไปแสดงแทน เราลองมารันดูกันก่อน ดีกว่า

/* App.svelte */

<script>
    import ContactCard from './ContactCard.svelte';
</script>

<ContactCard />

/* ContactCard.svelte */

<article class="contact-card">
  <h2>
    <slot name="name">
    <span class="missing">ไม่รู้จัก name</span>
    </slot>
  </h2>

  <div class="address">
     <slot name="address">
    <span class="missing">ไม่รู้จัก address</span>
     </slot>
  </div>

  <div class="email">
     <slot name="email">
    <span class="missing">ไม่รู้จัก email</span>
     </slot>
  </div>
</article>

ผลลัพธ์

เรามาลอง pass custom content กันหน่อย

/* App.svelte */

<script>
    import ContactCard from './ContactCard.svelte';
</script>

<ContactCard>
  <span>
    P. Thinny
  </span>
</ContactCard>

ผลลัพธ์

แน่นอนครับ มันไม่มีอะไรเปลี่ยนแปลง เพราะว่า เรายังไม่ได้ระบุชื่อ slot ตรง ตามที่เราได้กำหนดชื่อเอาไว้ งั้นลอง pass ชื่อ slot ไปสัก 1 อันก่อนแล้วกัน

/* App.svelte */

<script>
    import ContactCard from './ContactCard.svelte';
</script>

<ContactCard>
  <span slot="name">
    P. Thinny
  </span>
</ContactCard>

ถ้าเราระบุชื่อ slot="name" ให้ตรงจะได้ content กลับมา ดังภาพ

เรามาระบุชื่อให้ครบทุกอันดีกว่า แล้วมาดูผลลัพธ์กัน

/* App.svelte */

<script>
    import ContactCard from './ContactCard.svelte';
</script>

<ContactCard>
  <span slot="name">
    P. Thinny
  </span>

  <span slot="address">
    Bangkok 10400
  </span>

  <span slot="email">
    [e-mail]
  </span>

</ContactCard>

จะเห็นว่าได้ข้อมูลมาครบแล้ว นี่ก็เป็นวิธีการที่เราสามารถเอาข้อมูลไปวางตรงตำแหน่งที่เรากำหนดไว้ได้แล้ว ง่ายไหมครับ แล้วติดต่อ section ต่อไป นะครับ

ศึกษาเพิ่มเติมเรื่อง slot tag ได้ที่ slot tag

หากสนใจ svelte สามารถเรียนรู้การใช้งาน svelte แบบ step by step ได้ที่
Svelte: Framework Not Framework — (ตอนที่ 1) แรกรู้จัก

ขอบคุณทุกท่านที่อ่านมาถึงตรงนี้ ถ้าอ่านแล้วรู้มีประโยชน์ ฝากกด Subscribe หรือ share link ให้คนอื่นรับรู้ด้วยนะครับ ขอบคุณครับ