ปัญหาการส่งพร็อพส์ต่อทอดยาว
เหตุผลที่การส่งพร็อพส์ต่อทอดยาวทำให้ดูแลรักษายาก สิ่งที่ provide/inject ช่วยแก้ และเวลาที่ควรใช้
ปัญหาการส่งพร็อพส์ต่อทอดยาว เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
การส่งพร็อพต่อหลายชั้นคืออะไร
การส่งพร็อพต่อหลายชั้น คือการส่งข้อมูลผ่านคอมโพเนนต์หลายชั้นเพียงเพื่อไปให้คอมโพเนนต์ที่ซ้อนอยู่ลึก คอมโพเนนต์แต่ละตัวที่อยู่ระหว่างทางต้องรับและส่งต่อพร็อพ แม้ว่าจะไม่ได้ใช้พร็อพนั้นเองก็ตาม
แผนผังคอมโพเนนต์แบบลึก
ลองนึกถึงแผนผังนี้: App -> Layout -> Page -> Section -> Widget คอมโพเนนต์ Widget ที่อยู่ล่างสุดต้องการธีมปัจจุบัน แต่มีเพียง App ที่อยู่บนสุดเท่านั้นที่รู้ค่าดังกล่าว
App
Layout
Page
Section
Widget <-- needs "theme"การส่งผ่าน App
App เก็บธีมไว้และส่งต่อให้ Layout ในรูปพร็อพ
<!-- App.vue -->
<Layout :theme="theme" />Layout ส่งต่อค่า
Layout ไม่ได้ใช้ธีม แต่ต้องประกาศรับธีมแล้วส่งต่อไป เพียงเพื่อให้ค่าไปถึงระดับถัดไป
<!-- Layout.vue -->
const props = defineProps({ theme: String });
// template:
<Page :theme="props.theme" />Page ก็ส่งต่อค่าเช่นกัน
Page ทำโค้ดซ้ำแบบเดิม คือประกาศแล้วส่งต่อ แม้จะไม่ได้สนใจธีมเลยก็ตาม
<!-- Page.vue -->
const props = defineProps({ theme: String });
<Section :theme="props.theme" />Section ส่งต่อค่าอีกครั้ง
เช่นเดียวกันที่ Section ทุกชั้นเพิ่มโค้ดเชื่อมต่อซ้ำ ๆ ซึ่งไม่เกี่ยวข้องกับหน้าที่ของชั้นนั้น
<!-- Section.vue -->
const props = defineProps({ theme: String });
<Widget :theme="props.theme" />ในที่สุด Widget ก็ได้ใช้งาน
มีเพียงคอมโพเนนต์ Widget ที่อยู่ล่างสุดเท่านั้นที่ใช้ธีมจริง ๆ ส่วนสี่ชั้นด้านบนทำหน้าที่ส่งต่อค่าเพียงอย่างเดียว
<!-- Widget.vue -->
const props = defineProps({ theme: String });
// uses props.theme to style itselfเหตุใดจึงเป็นปัญหา
การส่งพร็อพต่อหลายชั้นทำให้เกิดปัญหา:
- มีโค้ดซ้ำในคอมโพเนนต์ทุกตัวที่อยู่ระหว่างทาง
- การปรับโครงสร้างทำให้ไฟล์จำนวนมากเสียหายเมื่อชื่อพร็อพเปลี่ยน
- พร็อพระหว่างทางบดบังความต้องการที่แท้จริงของแต่ละคอมโพเนนต์
- เพิ่มค่าที่ใช้ร่วมกันใหม่ได้ยาก
ยิ่งแย่ลงเมื่อมีหลายค่า
ลองเพิ่ม user, locale และ permissions เข้าไป แต่ละค่าต้องถูกส่งต่อผ่านทั้งสี่ชั้น ทำให้โค้ดซ้ำเพิ่มขึ้นหลายเท่า
<Layout
:theme="theme"
:user="user"
:locale="locale"
:permissions="permissions"
/>ค่าที่ใช้ร่วมกันไม่ได้เหมาะกับพร็อพทุกกรณี
พร็อพเหมาะอย่างยิ่งสำหรับการสื่อสารโดยตรงระหว่างคอมโพเนนต์แม่กับคอมโพเนนต์ลูก แต่สำหรับค่าที่คอมโพเนนต์ซึ่งอยู่ลึกในแผนผังต้องใช้ เช่น theme ผู้ใช้ปัจจุบัน การรองรับหลายภาษา การส่งค่าต่อหลายชั้นไม่ใช่เครื่องมือที่เหมาะสม เราต้องการวิธีส่งข้อมูลให้คอมโพเนนต์ลูกหลานทั้งหมดโดยตรง
เข้าสู่ provide / การฉีดค่า
Vue provide / inject ช่วยให้คอมโพเนนต์บรรพบุรุษส่งข้อมูลที่คอมโพเนนต์ลูกหลานใด ๆ สามารถร้องขอได้โดยตรง โดยข้ามคอมโพเนนต์ทุกชั้นที่อยู่ระหว่างกลาง บทเรียนถัดไปจะครอบคลุมการให้และการฉีดค่า
ตรวจสอบความเข้าใจ
ข้อใดอธิบายการส่งพร็อพต่อหลายชั้นได้ดีที่สุด
ทบทวน
คุณได้เห็นแล้วว่าการส่งพร็อพต่อหลายชั้นบังคับให้คอมโพเนนต์ทุกตัวที่อยู่ระหว่างทางในแผนผังลึกต้องประกาศและส่งต่อพร็อพที่ตนเองไม่ได้ใช้ ทำให้เกิดโค้ดซ้ำและการปรับโครงสร้างที่เปราะบาง provide/inject เป็นทางออกที่สะอาดกว่าสำหรับค่าที่ใช้ร่วมกันในส่วนลึกของแผนผัง
คำถามที่พบบ่อย
บทเรียน “ปัญหาการส่งพร็อพส์ต่อทอดยาว” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ปัญหาการส่งพร็อพส์ต่อทอดยาว” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ปัญหาการส่งพร็อพส์ต่อทอดยาว”
เหตุผลที่การส่งพร็อพส์ต่อทอดยาวทำให้ดูแลรักษายาก สิ่งที่ provide/inject ช่วยแก้ และเวลาที่ควรใช้ คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “ปัญหาการส่งพร็อพส์ต่อทอดยาว” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม
ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ปัญหาการส่งพร็อพส์ต่อทอดยาว
- provide() ในคอมโพเนนต์แม่
- inject() ในคอมโพเนนต์ลูก
- Provide/Inject สำหรับสถานะระดับแอป