0Pricing
Sveltejs Academy · บทเรียน

การส่งต่อพร็อพด้วย $$props และ $$restProps

ส่งต่อพร็อพทั้งหมดหรือพร็อพที่เหลือไปยังองค์ประกอบหรือคอมโพเนนต์ภายใน

การส่งต่อพร็อพด้วย $$props และ $$restProps เป็นบทเรียน Sveltejs Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Sveltejs Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน

เหตุผลที่ส่งต่อพร็อพ

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

ออบเจ็กต์ $$props

ภายในคอมโพเนนต์ $$props คือออบเจ็กต์ที่มีพร็อพทุกตัวที่ส่งให้คอมโพเนนต์

<script>
  // $$props is auto-injected
</script>

<input {...$$props} />

รวมพร็อพที่ไม่รู้จัก

แม้แต่พร็อพที่คอมโพเนนต์ไม่ได้ประกาศด้วย export let ก็มีอยู่ใน $$props

ออบเจ็กต์ $$restProps

$$restProps ไม่รวมพร็อพที่คุณประกาศอย่างชัดเจนด้วย export let จึงเหมาะสำหรับส่งต่อเฉพาะพร็อพส่วนเกิน

<script>
  export let label;
</script>

<input {...$$restProps} />

รูปแบบที่ใช้บ่อย

ประกาศพร็อพที่ต้องใช้ แล้วส่งต่อพร็อพที่เหลือไปยังองค์ประกอบที่ห่อหุ้ม

<script>
  export let label;
  export let helpText;
</script>

<label>{label}</label>
<input {...$$restProps} />

ข้อควรระวัง: ลำดับมีความสำคัญ

กระจายพร็อพก่อน แล้วจึงเขียนทับด้วยแอตทริบิวต์เฉพาะเมื่อจำเป็น

<input {...$$restProps} type="email" />

การส่งต่อคลาส

ส่งต่อแอตทริบิวต์ class ผ่าน $$restProps เพื่อให้ปรับธีมได้ยืดหยุ่น

การส่งต่อสไตล์

แอตทริบิวต์ style และแอตทริบิวต์ data-* ใด ๆ จะถูกส่งต่อโดยอัตโนมัติเช่นกัน

ตัวจัดการเหตุการณ์

ตัวรับฟังเหตุการณ์ที่คอมโพเนนต์แม่ส่งมาจะอยู่ใน $$props ในรูปฟังก์ชัน การกระจายจะส่งต่อฟังก์ชันเหล่านี้ด้วย

ข้อจำกัดด้านรีแอกทีฟ

$$props และ $$restProps มีประสิทธิภาพน้อยกว่าพร็อพที่ประกาศไว้เล็กน้อย เพราะ Svelte ไม่สามารถติดตามแบบสถิตได้

ข้อควรระวังของ TypeScript

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

ตรวจสอบอย่างรวดเร็ว

$$restProps คืออะไร

สรุปทบทวน

ส่งต่อพร็อพด้วย $$props (ทั้งหมด) หรือ $$restProps (เฉพาะส่วนเกิน) โดยใช้การกระจายบนองค์ประกอบด้านใน

คำถามที่พบบ่อย

บทเรียน “การส่งต่อพร็อพด้วย $$props และ $$restProps” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การส่งต่อพร็อพด้วย $$props และ $$restProps” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Sveltejs Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การส่งต่อพร็อพด้วย $$props และ $$restProps”

ส่งต่อพร็อพทั้งหมดหรือพร็อพที่เหลือไปยังองค์ประกอบหรือคอมโพเนนต์ภายใน คุณปฏิบัติ Sveltejs Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Sveltejs Academy หรือไม่

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

บทเรียน “การส่งต่อพร็อพด้วย $$props และ $$restProps” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Sveltejs Academy นี้ได้ไหม

ได้ บทเรียน Sveltejs Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. การประกาศพร็อพด้วย export let
  2. การส่งพร็อพจากคอมโพเนนต์แม่
  3. ค่าเริ่มต้นของพร็อพ
  4. การส่งต่อพร็อพด้วย $$props และ $$restProps
← กลับไปที่ Sveltejs Academy