คอมโพเนนต์ Vue แบบ Generic
defineComponent พร้อม Generic, script setup แบบ Generic และ slot props แบบมีชนิด
คอมโพเนนต์ Vue แบบ Generic เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
คอมโพเนนต์แบบทั่วไป
คอมโพเนนต์บางอย่างทำงานกับข้อมูลชนิดใดก็ได้ เช่น รายการที่มีชนิดข้อมูล ตัวเลือก หรือ ตาราง Vue 3.3 ให้คุณเขียนคอมโพเนนต์แบบทั่วไป เพื่อให้ผู้ใช้ยังคงได้การอนุมานชนิดข้อมูลอย่างครบถ้วน แทนที่จะถอยกลับไปใช้ any
แอตทริบิวต์แบบทั่วไป
เพิ่มแอตทริบิวต์ generic ให้กับ <script setup> แอตทริบิวต์นี้ประกาศพารามิเตอร์ชนิดข้อมูลที่พร้อมใช้ตลอดทั้งสคริปต์ เช่นเดียวกับฟังก์ชันแบบทั่วไป
<script setup lang="ts" generic="T">
// T can now be used below
</script>Props แบบทั่วไป
ใช้พารามิเตอร์ชนิดข้อมูลใน defineProps ในที่นี้คอมโพเนนต์จะรับอาร์เรย์ของชนิดข้อมูลใดก็ได้ T
<script setup lang="ts" generic="T">
defineProps<{
items: T[]
selected: T
}>()
</script>การอนุมานชนิดข้อมูล ณ จุดเรียกใช้
เมื่อคอมโพเนนต์แม่ส่ง items มา TypeScript จะอนุมาน T จากข้อมูลโดยไม่ต้องระบุชนิดข้อมูลเอง หากส่งตัวเลข selected ก็ต้องเป็นตัวเลขด้วย
<MyList :items="[1, 2, 3]" :selected="2" />
<!-- T inferred as number -->การจำกัดชนิดข้อมูล
เพิ่ม extends เพื่อกำหนดให้โครงสร้างต้องมีคุณสมบัติบางอย่าง ในที่นี้ T ต้องมี id ซึ่งเหมาะสำหรับรายการที่ใช้คีย์
<script setup lang="ts" generic="T extends { id: number }">
defineProps<{ items: T[] }>()
</script>พารามิเตอร์ชนิดข้อมูลหลายตัว
ประกาศพารามิเตอร์หลายตัวโดยคั่นด้วยจุลภาค เช่นเดียวกับลายเซ็นของฟังก์ชันแบบทั่วไป
<script setup lang="ts" generic="T, K extends keyof T">
defineProps<{
items: T[]
field: K
}>()
</script>Props ของสล็อตที่มีชนิดข้อมูล
ใช้พารามิเตอร์ชนิดข้อมูลร่วมกับสล็อตที่มีชนิดข้อมูล เพื่อให้เนื้อหาของสล็อตมีชนิดข้อมูลด้วย ประกาศลายเซ็นของสล็อตด้วย defineSlots
<script setup lang="ts" generic="T">
defineProps<{ items: T[] }>()
defineSlots<{
default(props: { item: T }): any
}>()
</script>การเรนเดอร์สล็อตแบบทั่วไป
ในแม่แบบ ให้ส่งแต่ละรายการไปยังสล็อต คอมโพเนนต์แม่จะได้รับ props ของสล็อตที่มีชนิดข้อมูลถูกต้อง
<template>
<ul>
<li v-for="item in items" :key="String(item)">
<slot :item="item" />
</li>
</ul>
</template>การใช้งานโดยอาศัยการอนุมาน
คอมโพเนนต์แม่จะได้รับ item ที่มีชนิดข้อมูลในขอบเขตของสล็อตโดยอัตโนมัติ โดยอิงจากอาร์เรย์ที่ส่งเข้าไป
<MyList :items="users">
<template #default="{ item }">
{{ item.name }}
</template>
</MyList>อีเวนต์แบบทั่วไป
พารามิเตอร์ชนิดข้อมูลจะส่งต่อไปยัง defineEmits ด้วย ทำให้ข้อมูลของอีเวนต์สามารถบรรจุชนิดข้อมูลทั่วไปได้
<script setup lang="ts" generic="T">
defineProps<{ items: T[] }>()
const emit = defineEmits<{
select: [item: T]
}>()
</script>ควรใช้ชนิดข้อมูลทั่วไปเมื่อใด
เลือกใช้คอมโพเนนต์แบบทั่วไปเมื่อคอมโพเนนต์ไม่ขึ้นกับชนิดข้อมูลอย่างแท้จริง และคุณต้องการให้การอนุมานส่งต่อผ่านคอมโพเนนต์นั้น เช่น รายการ ตาราง หรือช่องเติมข้อความอัตโนมัติ หากโครงสร้างข้อมูลตายตัว คอมโพเนนต์ที่มีชนิดข้อมูลแบบปกติจะเรียบง่ายกว่า
ตรวจสอบอย่างรวดเร็ว
ทดสอบความรู้เกี่ยวกับคอมโพเนนต์แบบทั่วไป
สรุปทบทวน
คุณได้เรียนรู้เรื่องคอมโพเนนต์แบบทั่วไป:
- ประกาศพารามิเตอร์ชนิดข้อมูลด้วยแอตทริบิวต์ generic บน script setup
- ใช้พารามิเตอร์เหล่านี้ใน defineProps สำหรับข้อมูลที่ไม่ขึ้นกับชนิดข้อมูล เช่น items: T[]
- จำกัดชนิดข้อมูลด้วย extends และเพิ่มพารามิเตอร์หลายตัว
- กำหนดชนิดข้อมูลให้ props ของสล็อตด้วย defineSlots เพื่อให้ผู้ใช้ได้รับการอนุมานอย่างครบถ้วน
คำถามที่พบบ่อย
บทเรียน “คอมโพเนนต์ Vue แบบ Generic” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “คอมโพเนนต์ Vue แบบ Generic” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “คอมโพเนนต์ Vue แบบ Generic”
defineComponent พร้อม Generic, script setup แบบ Generic และ slot props แบบมีชนิด คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “คอมโพเนนต์ Vue แบบ Generic” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม
ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การตั้งค่า TypeScript ในโปรเจกต์ Vue
- Props และ Emits แบบมีชนิดด้วย defineProps/defineEmits
- การกำหนดชนิดให้คอมโพสิเบิลและรีฟ
- คอมโพเนนต์ Vue แบบ Generic