defineProps และ defineEmits
พร็อพส์แบบระบุชนิดด้วย defineProps () การกำหนดเหตุการณ์ด้วย defineEmits () และการใช้ withDefaults() สำหรับค่าเริ่มต้น
defineProps และ defineEmits เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
การสื่อสารระหว่างคอมโพเนนต์
คอมโพเนนต์รับข้อมูลผ่าน props และส่งข้อความขึ้นไปผ่าน เหตุการณ์ ใน <script setup> คุณประกาศสิ่งเหล่านี้ด้วยมาโคร defineProps และ defineEmits
defineProps แบบใช้วัตถุขณะทำงาน
คุณประกาศ props ด้วยออบเจ็กต์ขณะทำงานได้เช่นเดียวกับ Options API วิธีนี้ใช้ได้ทั้งใน JS และ TS
<script setup>
const props = defineProps({
title: String,
count: Number
})
console.log(props.title)
</script>defineProps ด้วยชนิดทั่วไปของ TypeScript
ใน TypeScript ให้ส่งชนิดผ่านชนิดทั่วไป เพื่อประกาศ props ที่สะอาดและตรวจสอบชนิดได้ คอมไพเลอร์จะแปลงชนิดดังกล่าวเป็นการประกาศขณะทำงาน
<script setup lang="ts">
const props = defineProps<{
title: string
count: number
}>()
</script>Props ที่ไม่บังคับด้วย ?
เติมเครื่องหมายคำถามหลังคุณสมบัติในชนิด เพื่อทำให้คุณสมบัตินั้นไม่บังคับ props ที่ไม่บังคับอาจมีค่าเป็น undefined หากคอมโพเนนต์แม่ไม่ได้ส่งค่าให้
<script setup lang="ts">
const props = defineProps<{
title: string
subtitle?: string
}>()
</script>ค่าเริ่มต้นด้วย withDefaults
รูปแบบที่อิงชนิดไม่มีตำแหน่งสำหรับกำหนดค่าเริ่มต้น Vue จึงมี withDefaults ให้ใช้ โดยครอบ defineProps แล้วส่งออบเจ็กต์ค่าเริ่มต้นเข้าไป
<script setup lang="ts">
const props = withDefaults(defineProps<{
title?: string
count?: number
}>(), {
title: 'Untitled',
count: 0
})
</script>การใช้ Props ในแม่แบบ
Props เป็นข้อมูลแบบตอบสนอง ให้อ้างอิงโดยตรงในแม่แบบ หรืออ้างอิงผ่าน props.x ในสคริปต์
<template>
<h1>{{ title }}</h1>
<p>Count: {{ count }}</p>
</template>Props เป็นแบบอ่านอย่างเดียว
อย่าแก้ไข prop ภายในคอมโพเนนต์ลูกโดยเด็ดขาด Props จะไหลทางเดียว คือจากแม่ไปยังลูก หากต้องการสำเนาเฉพาะที่แก้ไขได้ ให้สร้างจาก computed หรือ ref ภายในเครื่อง
ประกาศเหตุการณ์ด้วย defineEmits
defineEmits ใช้ประกาศเหตุการณ์ที่คอมโพเนนต์สามารถส่งออกได้ รูปแบบขณะทำงานรับอาร์เรย์ของชื่อเหตุการณ์
<script setup>
const emit = defineEmits(['submit', 'cancel'])
function onSave() { emit('submit') }
</script>เหตุการณ์ที่กำหนดชนิดด้วย TypeScript
รูปแบบที่อิงชนิดช่วยให้คุณระบุทั้งชื่อเหตุการณ์ และ ชนิดของข้อมูลที่ส่งไปกับเหตุการณ์ วิธีนี้ช่วยตรวจจับข้อผิดพลาด เช่น การส่งอาร์กิวเมนต์ผิดชนิด
<script setup lang="ts">
const emit = defineEmits<{
(e: 'submit', payload: string): void
(e: 'cancel'): void
}>()
</script>การส่งเหตุการณ์พร้อมข้อมูล
เรียก emit พร้อมชื่อเหตุการณ์และข้อมูลใด ๆ คอมโพเนนต์แม่จะรับฟังด้วย @submit และได้รับข้อมูลที่ส่งมา
<script setup lang="ts">
const emit = defineEmits<{ (e: 'submit', value: string): void }>()
function send() { emit('submit', 'hello') }
</script>นำทุกอย่างมาประกอบกัน
คอมโพเนนต์ลูกจะรับ prop title และส่งเหตุการณ์ submit คอมโพเนนต์แม่ตอบสนองต่อทั้งสองอย่างได้ ข้อมูลจึงเป็นแบบทางเดียวที่สะอาดและมีชนิดกำกับ พร้อมเหตุการณ์ที่ระบุไว้อย่างชัดเจน
<script setup lang="ts">
defineProps<{ title: string }>()
const emit = defineEmits<{ (e: 'submit', v: string): void }>()
</script>ตรวจสอบความเข้าใจอย่างรวดเร็ว
ตรวจสอบความเข้าใจเกี่ยวกับ props และ emits
ทบทวน
คุณได้เรียนรู้การรับส่งข้อมูลระหว่างคอมโพเนนต์ใน <script setup> แล้ว:
definePropsใช้ประกาศข้อมูลนำเข้า (ออบเจ็กต์ขณะทำงานหรือชนิดทั่วไปของ TS)- ใช้
?สำหรับ props ที่ไม่บังคับ และใช้withDefaultsสำหรับค่าเริ่มต้น - Props เป็นแบบอ่านอย่างเดียวและไหลทางเดียว
defineEmitsใช้ประกาศเหตุการณ์ โดยสามารถกำหนดชื่อและข้อมูลที่ส่งไปกับเหตุการณ์ได้
คำถามที่พบบ่อย
บทเรียน “defineProps และ defineEmits” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “defineProps และ defineEmits” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “defineProps และ defineEmits”
พร็อพส์แบบระบุชนิดด้วย defineProps () การกำหนดเหตุการณ์ด้วย defineEmits () และการใช้ withDefaults() สำหรับค่าเริ่มต้น คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “defineProps และ defineEmits” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม
ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- บทนำสู่ script setup
- defineProps และ defineEmits
- defineExpose และ useAttrs
- การนำเข้าและใช้ Composables ใน script setup