การส่งพร็อพจากคอมโพเนนต์แม่
กำหนดค่าให้พร็อพของคอมโพเนนต์ลูกในแม่แบบของคอมโพเนนต์แม่
การส่งพร็อพจากคอมโพเนนต์แม่ เป็นบทเรียน Sveltejs Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Sveltejs Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
นำเข้าคอมโพเนนต์ลูก
ใช้ import มาตรฐานของ ES ที่ด้านบนของคอมโพเนนต์แม่ เพื่อนำเข้าคอมโพเนนต์ลูก
<script>
import Greeting from "./Greeting.svelte";
</script>ใช้แท็ก
แสดงผลคอมโพเนนต์ลูกด้วยการเขียนแท็กที่ใช้ชื่อขึ้นต้นด้วยตัวพิมพ์ใหญ่
<Greeting />ส่งค่าคงที่
ส่งสตริงค่าคงที่ด้วยแอตทริบิวต์ที่ใส่เครื่องหมายอัญประกาศ
<Greeting name="Ada" />ส่งค่าแบบไดนามิก
ส่งนิพจน์ JS โดยครอบค่าด้วยวงเล็บปีกกา
<Greeting name={userName} />รูปแบบย่อเมื่อชื่อเหมือนกัน
หากพร็อพและตัวแปรใช้ชื่อเดียวกัน ให้ใช้รูปแบบย่อ {name}
<Greeting {name} />พร็อพหลายรายการ
รวมพร็อพแบบคงที่ แบบไดนามิก และแบบย่อเข้าด้วยกันได้ในลำดับใดก็ได้
<Card title="Tasks" {items} count={items.length} />กระจายพร็อพ
กระจายออบเจ็กต์ของพร็อพด้วยไวยากรณ์ {...obj}
<Card {...cardProps} />พร็อพแบบมีเงื่อนไข
ใช้นิพจน์เงื่อนไขสามส่วนร่วมกันเพื่อกำหนดค่าแบบมีเงื่อนไข
<Button label={isLoading ? "Saving..." : "Save"} />รูปแบบย่อของบูลีน
ส่งแอตทริบิวต์บูลีนโดยไม่ใส่ค่าเพื่อกำหนดให้เป็น true
<Toggle disabled />ฟังก์ชันเป็นพร็อพ
สามารถส่งการอ้างอิงฟังก์ชันเป็นพร็อพเพื่อใช้เป็นฟังก์ชันเรียกกลับได้
<Modal onClose={() => (open = false)} />ออบเจ็กต์เป็นพร็อพ
ส่งออบเจ็กต์ทั้งก้อนเมื่อค่าที่เกี่ยวข้องหลายค่าต้องเดินทางไปด้วยกัน
<UserCard user={currentUser} />ตรวจสอบอย่างรวดเร็ว
คุณส่งตัวแปรเป็นพร็อพอย่างไร
สรุปทบทวน
นำเข้า ใช้แท็ก และส่งพร็อพด้วยค่าคงที่ นิพจน์ รูปแบบย่อ หรือการกระจาย
คำถามที่พบบ่อย
บทเรียน “การส่งพร็อพจากคอมโพเนนต์แม่” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การส่งพร็อพจากคอมโพเนนต์แม่” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Sveltejs Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การส่งพร็อพจากคอมโพเนนต์แม่”
กำหนดค่าให้พร็อพของคอมโพเนนต์ลูกในแม่แบบของคอมโพเนนต์แม่ คุณปฏิบัติ Sveltejs Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Sveltejs Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Sveltejs Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “การส่งพร็อพจากคอมโพเนนต์แม่” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Sveltejs Academy นี้ได้ไหม
ได้ บทเรียน Sveltejs Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การประกาศพร็อพด้วย export let
- การส่งพร็อพจากคอมโพเนนต์แม่
- ค่าเริ่มต้นของพร็อพ
- การส่งต่อพร็อพด้วย $$props และ $$restProps