Vue Academy · บทเรียน

Props และ Emits แบบมีชนิดด้วย defineProps/defineEmits

Generic defineProps (), ชนิดข้อมูลที่ซับซ้อน props ที่ไม่บังคับ และการกำหนดชนิดของ emit

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

การกำหนดชนิดข้อมูลอินพุตและเอาต์พุตของคอมโพเนนต์

เมื่อใช้ lang="ts" มาโคร defineProps และ defineEmits จะรับชนิดข้อมูล TypeScript ได้โดยตรง ทำให้ตรวจสอบข้อมูลที่ไหลเข้าและออกจากคอมโพเนนต์ได้ตั้งแต่เวลาคอมไพล์

Props จากอินเทอร์เฟซ

ส่งชนิดข้อมูลให้กับพารามิเตอร์ทั่วไปของ defineProps การใช้ อินเทอร์เฟซ ช่วยให้โครงสร้าง props ที่ซับซ้อนอ่านง่ายและนำกลับมาใช้ใหม่ได้

<script setup lang="ts">
interface Props {
  title: string
  count: number
}
const props = defineProps<Props>()
</script>

ชนิดข้อมูลออบเจ็กต์แบบเขียนในบรรทัดเดียว

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

<script setup lang="ts">
const props = defineProps<{
  label: string
  disabled: boolean
}>()
</script>

พร็อพเพอร์ตีเสริมด้วย ?

ทำเครื่องหมายพร็อพเพอร์ตีว่าเป็นตัวเลือกเสริมด้วย ? props แบบเสริมจะมีชนิดข้อมูลเป็น T | undefined และคอมโพเนนต์แม่อาจไม่ส่งค่าเหล่านี้มาได้

<script setup lang="ts">
interface Props {
  title: string
  subtitle?: string
}
const props = defineProps<Props>()
</script>

ชนิดข้อมูลของ Props ที่ซับซ้อน

Props อาจเป็นอาร์เรย์ ยูเนียน หรือโครงสร้างออบเจ็กต์ก็ได้ กล่าวคือเป็นอะไรก็ตามที่ TypeScript สามารถแสดงได้

<script setup lang="ts">
interface Props {
  items: string[]
  size: 'sm' | 'md' | 'lg'
  user: { id: number; name: string }
}
const props = defineProps<Props>()
</script>

ค่าเริ่มต้นด้วย withDefaults

รูปแบบที่ระบุเฉพาะชนิดข้อมูลไม่สามารถเก็บค่าเริ่มต้นได้ จึงต้องครอบด้วย withDefaults อาร์กิวเมนต์ตัวที่สองจะจับคู่ชื่อ prop กับค่าเริ่มต้น

<script setup lang="ts">
const props = withDefaults(defineProps<{
  size?: string
  count?: number
}>(), {
  size: 'md',
  count: 0
})
</script>

ค่าเริ่มต้นสำหรับออบเจ็กต์และอาร์เรย์

ค่าเริ่มต้นของออบเจ็กต์และอาร์เรย์ต้องส่งกลับจากฟังก์ชันสร้าง เช่นเดียวกับใน Options API เพื่อหลีกเลี่ยงการใช้อินสแตนซ์เดียวร่วมกันระหว่างคอมโพเนนต์

withDefaults(defineProps<{
  tags?: string[]
}>(), {
  tags: () => []
})

การประกาศอีเวนต์ที่มีชนิดข้อมูล

defineEmits สามารถรับชนิดข้อมูลที่แสดงรายการอีเวนต์แต่ละรายการและข้อมูลที่ส่งไปพร้อมอีเวนต์ในรูปแบบลายเซ็นการเรียกใช้ได้ วิธีนี้จะตรวจจับชนิดข้อมูลของข้อมูลที่ส่งผิดตั้งแต่เวลาคอมไพล์

<script setup lang="ts">
const emit = defineEmits<{
  (e: 'change', value: string): void
  (e: 'delete', id: number): void
}>()
</script>

การส่งข้อมูลที่มีชนิดข้อมูล

ตอนนี้ emit จะยอมรับเฉพาะชื่ออีเวนต์ที่ถูกต้องและชนิดข้อมูลของข้อมูลที่ส่งที่ตรงกันเท่านั้น หากส่งตัวเลขในตำแหน่งที่คาดว่าจะเป็นสตริง จะเกิดข้อผิดพลาดในการคอมไพล์

function rename(name: string) {
  emit('change', name) // ok
  // emit('change', 123) // type error
}

ไวยากรณ์ทูเพิลแบบระบุชื่อ

Vue 3.3+ รองรับรูปแบบออบเจ็กต์แบบย่อ โดยแต่ละอีเวนต์จะจับคู่กับทูเพิลของชนิดข้อมูลอาร์กิวเมนต์ ซึ่งสะอาดกว่าลายเซ็นการเรียกใช้

<script setup lang="ts">
const emit = defineEmits<{
  change: [value: string]
  delete: [id: number]
}>()
</script>

Props และอีเวนต์ร่วมกัน

คอมโพเนนต์ที่มีชนิดข้อมูลโดยทั่วไปจะประกาศทั้งสองอย่าง ได้แก่ อินพุตผ่าน defineProps และเอาต์พุตผ่าน defineEmits โดยตรวจสอบได้ตลอดทั้งเส้นทาง

<script setup lang="ts">
defineProps<{ modelValue: string }>()
const emit = defineEmits<{
  'update:modelValue': [value: string]
}>()
</script>

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

ทดสอบความรู้เกี่ยวกับ props และอีเวนต์ที่มีชนิดข้อมูล

สรุปทบทวน

คุณได้เรียนรู้เรื่องอินพุตและเอาต์พุตของคอมโพเนนต์ที่มีชนิดข้อมูล:

ส่งอินเทอร์เฟซหรือชนิดข้อมูลแบบเขียนในบรรทัดเดียวให้ defineProps<T>()
ใช้ ? สำหรับ props แบบเสริม และใช้ withDefaults สำหรับค่าเริ่มต้น (ใช้ฟังก์ชันสร้างสำหรับออบเจ็กต์/อาร์เรย์)
defineEmits<T>() กำหนดชนิดข้อมูลของชื่ออีเวนต์และข้อมูลที่ส่ง
รูปแบบทูเพิล (event: [payload]) เป็นไวยากรณ์แบบย่อสมัยใหม่

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

บทเรียน “Props และ Emits แบบมีชนิดด้วย defineProps/defineEmits” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “Props และ Emits แบบมีชนิดด้วย defineProps/defineEmits”

Generic defineProps (), ชนิดข้อมูลที่ซับซ้อน props ที่ไม่บังคับ และการกำหนดชนิดของ emit คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

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

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

บทเรียน “Props และ Emits แบบมีชนิดด้วย defineProps/defineEmits” ใช้เวลานานแค่ไหน

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

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

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

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

การตั้งค่า TypeScript ในโปรเจกต์ Vue
Props และ Emits แบบมีชนิดด้วย defineProps/defineEmits
การกำหนดชนิดให้คอมโพสิเบิลและรีฟ
คอมโพเนนต์ Vue แบบ Generic

← กลับไปที่ Vue Academy