วิธีใช้สล็อตใน Svelte

Svelte นำเสนอวิธีที่แตกต่างกันสำหรับส่วนประกอบในการสื่อสารระหว่างกัน รวมถึงอุปกรณ์ประกอบฉาก สล็อต ฯลฯ คุณจะต้องรวมสล็อตเพื่อสร้างส่วนประกอบที่ยืดหยุ่นและนำกลับมาใช้ใหม่ในแอปพลิเคชัน Svelte ของคุณ

ทำความเข้าใจสล็อตใน Svelte

ในบริบทของกรอบงาน Svelte ช่องทำงานคล้ายกับช่องในระบบนิเวศ Vue โดยเปิดใช้งานการถ่ายโอนข้อมูลจากองค์ประกอบหลักไปยังองค์ประกอบย่อยผ่านช่องว่างตัวยึดตำแหน่งที่กำหนดภายในโครงร่างขององค์ประกอบหลัง

การทำงานกับช่องใน Svelte ช่วยให้มีความยืดหยุ่นในระดับสูงในการสร้างส่วนประกอบที่สามารถปรับแต่งให้เข้ากับสถานการณ์ต่างๆ ผ่านการใช้ข้อความธรรมดา มาร์กอัป HTML หรือส่วนประกอบ Svelte เพิ่มเติม การรวมช่องต่างๆ เข้าด้วยกันช่วยในการพัฒนาองค์ประกอบที่หลากหลายและปรับเปลี่ยนได้ซึ่งตอบสนองความต้องการที่หลากหลาย

การสร้างสล็อตพื้นฐาน

หากต้องการรวมช่องภายในเค้าโครงของส่วนประกอบ Svelte ให้ใช้โครงสร้างที่วางอยู่ภายในเทมเพลตของส่วนประกอบดังกล่าว ตัวยึดตำแหน่งนี้ออกแบบมาเพื่อยอมรับและแสดงเนื้อหาที่มาจากเอนทิตีหลักที่เกี่ยวข้อง โดยค่าเริ่มต้น ช่องนี้จะต้องแสดงสารใดๆ ก็ตามที่แทรกเข้าไปในช่องนั้นตามค่าเริ่มต้น

การรวมช่องในฟังก์ชันที่ผู้ใช้กำหนดสามารถทำได้โดยการกำหนดพารามิเตอร์ที่จำเป็นแต่ละรายการภายในลายเซ็นของฟังก์ชัน ดังที่แสดงด้านล่าง:

 <main>
  This is the child component
  <slot></slot>
</main>

ข้อมูลโค้ดที่ให้มาจะแสดงอินสแตนซ์ของคอมโพเนนต์ย่อย ซึ่งใช้พื้นที่ที่กำหนดที่เรียกว่า"ช่อง"เพื่อรับเนื้อหาจากคอมโพเนนต์หลักที่เกี่ยวข้อง

ในการส่งข้อมูลจากองค์ประกอบหลักไปยังองค์ประกอบย่อยในการพัฒนาเว็บ จะต้องเริ่มแนะนำองค์ประกอบย่อยในองค์ประกอบหลักโดยการนำเข้า ต่อจากนั้น แทนที่จะใช้มาร์กอัปที่สรุปด้วยตนเองสำหรับการแสดงผลองค์ประกอบลูก ให้ใช้ทั้งเครื่องหมายเปิดและปิด ท้ายที่สุด ภายในขอบเขตของแท็กที่ครอบคลุม ให้เชื่อมโยงข้อมูลที่มีวัตถุประสงค์เพื่อถ่ายทอดระหว่างองค์ประกอบหลักและองค์ประกอบย่อย

ตัวอย่างเช่น:

 <script>
 import Component from "./Component.svelte";
</script>

<main>
 This is the parent component
 <Component>
 <span>This is a message from the parent component</span>
 </Component>
</main>

ในกรณีที่องค์ประกอบหลักไม่สามารถจัดหาเนื้อหาสำหรับช่องของส่วนประกอบย่อย เนื้อหาเริ่มต้นหรือทางเลือกอาจถูกจัดเตรียมไว้ภายในช่องเหล่านั้น สิ่งนี้ทำหน้าที่เป็นเนื้อหาที่จัดแสดงเมื่อไม่มีเนื้อหามาจากผู้ปกครองผู้สร้าง

เพื่อจัดเตรียมเนื้อหาทางเลือกในกรณีที่เกิดข้อผิดพลาด เราสามารถใช้แอตทริบิวต์"สำรอง"ภายในมาร์กอัป SVG ได้ดังต่อไปนี้:

 <main>
  This is the child component
  <slot>Fallback Content</slot>
</main>

ข้อมูลโค้ดที่ให้มาทำหน้าที่เป็นตัวเลือกสำรอง โดยแสดงวลี"เนื้อหาสำรอง"ในช่องที่กำหนดเมื่อองค์ประกอบหลักไม่ได้จัดหาวัสดุอื่นมาให้

การส่งผ่านข้อมูลข้ามสล็อตด้วยอุปกรณ์ประกอบฉากสล็อต

Svelte ช่วยให้สามารถส่งข้อมูลผ่านการใช้"อุปกรณ์ประกอบฉากสล็อต"เพื่อวัตถุประสงค์ในการจัดหารายละเอียดเฉพาะภายในพื้นที่ที่กำหนด ซึ่งมักเรียกว่า"สล็อต"ซึ่งตั้งอยู่ภายในส่วนประกอบอื่น กระบวนการนี้เกิดขึ้นเมื่อมีข้อกำหนดในการถ่ายทอดรายละเอียดจากส่วนประกอบหนึ่งไปยังอีกส่วนประกอบหนึ่งในระหว่างการดำเนินการส่วนหลัง

ตัวอย่างเช่น:

 <script>
  let message = 'Hello Parent Component!'
</script>

<main>
  This is the child component
  <slot message={message}></slot>
</main>

ข้อมูลโค้ดที่ให้มาถือเป็นองค์ประกอบ Svelte ภายในแท็ก ตัวแปรที่มีชื่อ’ข้อความ’จะถูกประกาศและกำหนดค่าเป็น"Hello Parent Component!“นอกจากนี้ ตัวแปร’ข้อความ’จะถูกส่งผ่านเป็นอาร์กิวเมนต์ไปยังคุณสมบัติ’สล็อต’ที่มีชื่อเดียวกัน ด้วยเหตุนี้ จึงทำให้องค์ประกอบหลักสามารถจัดหาเนื้อหาให้กับช่อง’ข้อความ’ที่กำหนดนี้ โดยการให้ข้อมูลที่เกี่ยวข้องตามบริบทเพื่อแสดงแทนสตริงฮาร์ดโค้ด"Hello Parent Component!”

 <script>
 import Component from "./Component.svelte";
</script>

<main>
 This is the parent component
 <Component let:message>
 <div>
 The child component says {message}
 </div>
 </Component>
</main>

การใช้ไวยากรณ์ ช่วยให้ส่วนประกอบหลักสามารถเข้าถึงคุณสมบัติสล็อต ข้อความ ที่ได้รับจากส่วนประกอบย่อย โดยที่เนื้อหาที่อยู่ในองค์ประกอบ จะได้รับโดยตรงจากสล็อตที่กล่าวมาข้างต้น

สิ่งสำคัญคือต้องทราบว่าการใช้เสาแบบช่องเดียวอาจไม่เพียงพอในบางกรณี ในกรณีดังกล่าว อาจจำเป็นต้องใช้อุปกรณ์ประกอบฉากหลายช่องเพื่อรองรับข้อมูลหรือข้อกำหนดเพิ่มเติม

 <script>
  let user = {
    firstName: 'John',
    lastName: 'Doe'
  };
</script>

<main>
  This is the child component
  <slot firstName={user.firstName} lastName={user.lastName}></slot>
</main>

ในองค์ประกอบหลัก:

 <script>
 import Component from "./Component.svelte";
</script>

<main>
 This is the parent component
 <Component let:firstName let:lastName>
 <div>
 The user's name is {firstName} {lastName}
 </div>
 </Component>
</main>

การทำงานกับสล็อตที่มีชื่อ

เมื่อใช้ช่องที่มีชื่อภายในส่วนประกอบของคุณ ช่องเหล่านี้จะให้วิธีที่มีประสิทธิภาพในการผ่านช่องหลายช่องในขณะที่ให้ชื่อช่องที่แตกต่างกัน วิธีการนี้อำนวยความสะดวกในการจัดการสล็อตจำนวนมากได้อย่างมีประสิทธิภาพมากขึ้น และอนุญาตให้สร้างส่วนประกอบที่ซับซ้อนซึ่งมีการกำหนดค่าที่หลากหลาย

เราต้องเสนอฉลากหรือชื่อของตำแหน่งที่ต้องการสำหรับเนื้อหาภายในช่องรับที่กำหนดเพื่อกำหนดตามต้องการ

 <div>
  This is the child component
  
  <p>Header: <slot name='header'></slot></p>
  <p>Footer: <slot name='footer'></slot></p>
</div>

พิจารณาตัวอย่างที่เรามีเต้ารับที่สามารถระบุตัวตนได้สองอัน ได้แก่ การกำหนด"ส่วนหัว"และส่วน"ส่วนท้าย"ด้วยการใช้คุณสมบัติ"สล็อต"ที่หลากหลาย เราอาจส่งข้อมูลไปยังส่วนใดส่วนหนึ่งเหล่านี้จากองค์ประกอบที่มีลำดับสูงกว่าภายในโครงสร้างแบบลำดับชั้น

ตัวอย่างเช่น:

 <script>
 import Component from "./Component.svelte";
</script>

<main>
 This is the parent component
 <Component>
 <span slot="header">This will be passed to the header slot</span>
 <span slot="footer">This will be passed to the footer slot</span>
 </Component>
</main>

โค้ดที่ให้มาแสดงให้เห็นถึงกระบวนการใช้แอตทริบิวต์"slot"และ"prop"เพื่อถ่ายทอดเนื้อหาไปยังช่องที่กำหนด ภายในองค์ประกอบเริ่มต้น “ ” ช่อง “ส่วนหัว” จะถูกกำหนดเป้าหมายโดยการระบุแอตทริบิวต์ “ช่อง” ที่มีค่าเป็น “ส่วนหัว” ดังนั้นข้อความที่แนบมาจะแสดงในช่อง"ส่วนหัว"ที่กำหนด ทำซ้ำแนวทางนี้สำหรับองค์ประกอบ"“ที่สอง ช่อง"ส่วนท้าย"จะเข้าถึงได้โดยการกำหนดค่าของแอตทริบิวต์"ช่อง"ให้กับ"ส่วนท้าย"ดังนั้นจึงแสดงข้อความที่มีอยู่ภายในช่อง"ส่วนท้าย"ที่ระบุ

ทำความเข้าใจกับการส่งต่อสล็อต

การส่งต่อช่องซึ่งเป็นลักษณะของกรอบงาน Svelte ช่วยให้สามารถถ่ายโอนข้อมูลจากองค์ประกอบหลักไปยังองค์ประกอบย่อยผ่านตัวกลางหรือส่วนประกอบ wrapper ฟังก์ชันนี้อำนวยความสะดวกในการส่งข้อมูลระหว่างองค์ประกอบที่ไม่เชื่อมต่อ และให้ความยืดหยุ่นในการจัดการอินเทอร์เฟซผู้ใช้ที่ซับซ้อน

พิจารณากระบวนการปรับใช้การส่งต่อช่องในระบบนิเวศแบบไดนามิก โดยขั้นตอนที่จำเป็นเกี่ยวข้องกับการสร้างองค์ประกอบย่อยดังต่อไปนี้:

 <main>
  This is the child component
  <slot name="message"></slot>
</main>

ถัดไป คุณสร้างส่วนประกอบ wrapper:

 <script>
    import Component from "./Component.svelte";
</script>

<main>
    <Component>
        <div slot='message'>
            <slot name="wrapperMessage"></slot>
        </div>
    </Component>
</main>

ภายในข้อมูลโค้ดนี้ จะมีการแนะนำป้ายกำกับตัวแปรที่กำหนดไว้ล่วงหน้าในแพ็คเกจข้อมูลที่ถ่ายทอดของโครงสร้างอินเทอร์เฟซรอง

ในองค์ประกอบหลัก เราสามารถรวมข้อมูลโค้ดที่กล่าวมาข้างต้นเพื่อให้บรรลุฟังก์ชันที่ต้องการในการแสดงผลส่วนประกอบหีบเพลงด้วยเนื้อหาที่ขยายได้ตามข้อมูลที่ให้ไว้ผ่านอุปกรณ์ประกอบฉาก ช่วยให้สามารถโต้ตอบผู้ใช้แบบไดนามิกและโต้ตอบกับส่วนประกอบหีบเพลง ปรับปรุงประสบการณ์ผู้ใช้โดยรวม

 <script>
 import Wrapper from "./Wrapper.svelte";
</script>

<main>
 This is the parent component
 <Wrapper>
 <div slot="wrapperMessage">
 This is from the parent component
 </div>
 </Wrapper>
</main>

สถาปัตยกรรมที่กล่าวมาข้างต้นอำนวยความสะดวกในการส่งข้อความ “นี่คือจากองค์ประกอบหลัก” ซึ่งลัดเลาะองค์ประกอบ wrapper ระหว่างทางไปยังองค์ประกอบย่อยที่รับ โดยใช้ช่อง wrapperMessage ที่วางตำแหน่งภายในองค์ประกอบ wrapper

ทำให้ชีวิตของคุณง่ายขึ้นด้วยสล็อต Svelte

สล็อตเป็นคุณลักษณะพิเศษภายใน Svelte ที่ช่วยให้สามารถสร้างองค์ประกอบที่เป็นส่วนตัวและสับเปลี่ยนได้ ในหลักสูตรนี้ คุณจะได้รู้จักกับการสร้างสล็อตพื้นฐาน สล็อตที่ระบุ การใช้คุณสมบัติของสล็อต และอื่นๆ ด้วยการทำความเข้าใจสล็อตที่หลากหลายและการนำไปใช้ เราสามารถสร้างการออกแบบส่วนต่อประสานกับผู้ใช้ที่ปรับเปลี่ยนได้และหลากหลาย