Reusable Vue Components (การสร้าง Component ที่นำกลับมาใช้ได้)

Props, Slots และ Emits

เทคนิคพื้นฐานสำหรับการสร้าง component ที่ reuse ได้

การออกแบบ Props

ควรกำหนด prop types ให้ชัดเจนและมี documentation

การใช้ Slots

Slots ช่วยให้สร้าง component ที่ flexible มากขึ้น

การใช้งาน Emits

ควรกำหนด emit events ให้ชัดเจนเหมือนกับ props

การใช้ Props, Slots และ Emits

<script setup lang="ts">
// กำหนด props ด้วย TypeScript
interface ButtonProps {
  variant?: "primary" | "secondary";
  size?: "sm" | "md" | "lg";
}

const props = defineProps<ButtonProps>();
const emit = defineEmits<{
  (e: "click", payload: MouseEvent): void;
}>();
</script>

<template>
  <button
    :class="[`btn-${variant}`, `btn-${size}`]"
    @click="emit('click', $event)"
  >
    <!-- ใช้ slot สำหรับ content -->
    <slot>Default Button</slot>
  </button>
</template>

ตัวอย่างการใช้งาน

<template>
  <MyButton
    variant="primary"
    size="lg"
    @click="handleClick"
  >
    <Icon name="save" />
    Save Changes
  </MyButton>
</template>