0Pricing
Frontend Academy · บทเรียน

Props และ Emits ของคอมโพเนนต์

ส่งข้อมูลลงด้วย defineProps ส่งเหตุการณ์ขึ้นด้วย defineEmits และตรวจสอบ props ด้วยข้อจำกัด type และ required

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

Props ใน Vue 3

props ใช้ส่งข้อมูลจากคอมโพเนนต์แม่ไปยังคอมโพเนนต์ลูก ใน <script setup> ให้ใช้ defineProps() เพื่อประกาศ props โดย props จะอ่านได้อย่างเดียวในคอมโพเนนต์ลูก — ห้ามแก้ไข props โดยตรง

<script setup lang="ts">
const props = defineProps<{
  title: string;
  count?: number;
  variant?: 'primary' | 'secondary';
}>();
</script>

<template>
  <h2>{{ title }} ({{ count ?? 0 }})</h2>
</template>

withDefaults สำหรับค่าเริ่มต้นของ Prop

ครอบ defineProps() ด้วย withDefaults() เพื่อกำหนดค่าเริ่มต้น

<script setup lang="ts">
const props = withDefaults(defineProps<{
  count?: number;
  variant?: 'primary' | 'secondary';
}>(), {
  count: 0,
  variant: 'primary'
});
</script>

การส่ง Props ใน Template

ส่งค่าแบบคงที่เป็นแอตทริบิวต์ธรรมดา ส่งค่าแบบไดนามิกด้วย v-bind (:) และส่งแอตทริบิวต์แบบบูลีนด้วยการระบุแค่ว่ามีแอตทริบิวต์นั้น (ไม่ต้องกำหนดค่า)

<MyButton title="Submit" :count="activeCount" variant="primary" />
<Toggle :disabled="isLoading" />

Emits — การสื่อสารจากลูกไปยังแม่

คอมโพเนนต์ลูกสื่อสารขึ้นไปยังคอมโพเนนต์แม่ด้วยการส่งเหตุการณ์ ใช้ defineEmits() เพื่อประกาศเหตุการณ์ที่คอมโพเนนต์สามารถส่งได้ จากนั้นเรียกใช้ฟังก์ชัน emit ที่ส่งคืนมา

<script setup lang="ts">
const emit = defineEmits<{
  update: [value: string];
  close: [];
  submit: [data: FormData];
}>();

function handleSubmit(data: FormData) {
  emit('submit', data); // fire the event
}
</script>

การรับฟัง Emits ในคอมโพเนนต์แม่

ใช้ @eventName ใน template เพื่อรับฟังเหตุการณ์กำหนดเองจากคอมโพเนนต์ลูก

<SearchInput
  @update="searchTerm = $event"
  @submit="handleSearch"
/>

v-model กับคอมโพเนนต์กำหนดเอง

v-model บนคอมโพเนนต์กำหนดเองเป็นรูปแบบย่อของ :modelValue + @update:modelValue คอมโพเนนต์ต้องรับพร็อพและส่งเหตุการณ์อัปเดตออกมา

<!-- Parent: -->
<MyInput v-model="email" />

<!-- MyInput.vue: -->
<script setup lang="ts">
defineProps<{ modelValue: string }>();
const emit = defineEmits<{ 'update:modelValue': [string] }>();
</script>

<template>
  <input :value="modelValue" @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)" />
</template>

การผูก v-model หลายรายการ

Vue 3 รองรับ v-model หลายรายการในคอมโพเนนต์เดียว โดยใช้ตัวปรับแต่งที่มีชื่อกำกับ

<UserForm v-model:firstName="user.firstName" v-model:lastName="user.lastName" />

การตรวจสอบ Prop

ใน Options API หรือการประกาศ props ขณะทำงาน ให้เพิ่มข้อกำหนด type, required และ validator ส่วน defineProps() ที่อิง TypeScript จะจัดการเรื่องนี้ขณะคอมไพล์

Prop เทียบกับ Data — การไหลทางเดียว

Vue บังคับใช้การไหลของข้อมูลทางเดียว: props ไหลจากคอมโพเนนต์แม่ไปยังคอมโพเนนต์ลูก ส่วนเหตุการณ์ไหลจากคอมโพเนนต์ลูกไปยังคอมโพเนนต์แม่ หากคอมโพเนนต์ลูกต้องแก้ไขข้อมูล จะส่งเหตุการณ์ออกมา แล้วให้คอมโพเนนต์แม่จัดการการอัปเดต

Slots เป็นทางเลือกแทน Props

สำหรับเนื้อหาที่ควรเป็น HTML หรือคอมโพเนนต์ ไม่ใช่เพียงข้อมูล ให้ใช้ slots คอมโพเนนต์แม่จะส่งเนื้อหาภายในแท็กของคอมโพเนนต์ และคอมโพเนนต์ลูกจะแสดงเนื้อหานั้นด้วย <slot />

<!-- Parent: -->
<Card title="Hello">
  <p>This content goes in the default slot.</p>
</Card>

<!-- Card.vue: -->
<template>
  <div class="card">
    <h2>{{ title }}</h2>
    <slot />  <!-- renders the p tag -->
  </div>
</template>

ตรวจสอบความเข้าใจ

คอมโพเนนต์ Vue ลูกสื่อสารเหตุการณ์กลับไปยังคอมโพเนนต์แม่อย่างไร

สรุป: Props และ Emits

ใช้ defineProps สำหรับการประกาศ props พร้อมชนิดข้อมูล ใช้ withDefaults สำหรับค่าเริ่มต้น props เป็นแบบอ่านอย่างเดียวในคอมโพเนนต์ลูก ใช้ defineEmits เพื่อประกาศและกำหนดชนิดของเหตุการณ์ที่ส่งออก ใช้ @eventName ในคอมโพเนนต์แม่เพื่อรับฟัง v-model = :modelValue + @update:modelValue การไหลของข้อมูลทางเดียว: props ไหลลง เหตุการณ์ไหลขึ้น ใช้ slots สำหรับส่งเนื้อหาหรือส่วนย่อยของ template

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

บทเรียน “Props และ Emits ของคอมโพเนนต์” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “Props และ Emits ของคอมโพเนนต์”

ส่งข้อมูลลงด้วย defineProps ส่งเหตุการณ์ขึ้นด้วย defineEmits และตรวจสอบ props ด้วยข้อจำกัด type และ required คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

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

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

บทเรียน “Props และ Emits ของคอมโพเนนต์” ใช้เวลานานแค่ไหน

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

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

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

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

  1. Vue SFC: script, template และ style
  2. Options API: data, methods และ computed
  3. คำสั่ง: v-if, v-for, v-bind และ v-on
  4. Props และ Emits ของคอมโพเนนต์
← กลับไปที่ Frontend Academy