Props และเหตุการณ์แบบกำหนดเอง

การสื่อสารระหว่างคอมโพเนนต์แม่กับลูก

การประกาศพร็อพส์

<script setup>
const props = defineProps(['title', 'count'])
</script>

<template>
  <h2>{{ title }}</h2>
  <p>{{ count }}</p>
</template>

พร็อพส์พร้อมชนิดข้อมูล

<script setup>
defineProps({
  title: String,
  count: Number,
  isActive: Boolean
})
</script>

พร็อพส์พร้อมค่าเริ่มต้นและค่าที่จำเป็น

<script setup>
defineProps({
  title: {
    type: String,
    required: true
  },
  count: {
    type: Number,
    default: 0
  }
})
</script>

การส่งพร็อพส์จากคอมโพเนนต์แม่

<template>
  <ProductCard
    title="Coffee Mug"
    :count="stock"
    :is-active="available"
  />
</template>

<!-- static string vs bound expression -->

ธรรมเนียมการตั้งชื่อพร็อพส์

พร็อพส์เป็นแบบอ่านอย่างเดียว

การประกาศเหตุการณ์ที่ส่งออก

<script setup>
const emit = defineEmits(['increment', 'delete'])
</script>

การส่งเหตุการณ์

<script setup>
const emit = defineEmits(['add'])

function handleClick() {
  emit("add", { id: 1, name: "Item" })
}
</script>

<template>
  <button @click="handleClick">Add</button>
</template>

การส่งเหตุการณ์ใน Options API

export default {
  emits: ["save"],
  methods: {
    onSave() {
      this.$emit("save", this.formData)
    }
  }
}

คอมโพเนนต์แม่รับฟังเหตุการณ์

<template>
  <TodoItem
    :task="task"
    @delete="removeTask"
    @add="onAdd"
  />
</template>

<script setup>
function onAdd(item) {
  console.log("Added:", item.name)
}
</script>

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

ทบทวน: พร็อพส์และเหตุการณ์