Vue Components

คอมโพเนนต์พื้นฐานใน Vue

Basic Component

คอมโพเนนต์พื้นฐานใน Vue

<template>
  <h1>Hello, World!</h1>
</template>

Component with Props

คอมโพเนนต์ที่รับค่าผ่าน props

<script setup>
const props = defineProps({
  name: String,
});
</script>

<template>
  <h1>Hello, {{ name }}!</h1>
</template>

Component Composition

เทคนิคการประกอบคอมโพเนนต์เข้าด้วยกัน

<script setup>
const props = defineProps({
  title: String,
});
</script>

<template>
  <div class="card">
    <slot />
  </div>
</template>

Scoped Slots

Scoped Slots ใน Vue (เรียกว่า Slots พร้อม props)

<script setup>
const props = defineProps({
  users: Array,
});
</script>

<template>
  <ul>
    <li v-for="user in users" :key="user.id">
      <slot :user="user" />
    </li>
  </ul>
</template>

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

<UserList :users="users" v-slot="{ user }">
  <div>
    <h3>{{ user.name }}</h3>
    <p>{{ user.email }}</p>
  </div>
</UserList>

Advanced Patterns

Higher-Order Components

เทคนิคการสร้าง Higher-Order Components ใน Vue

<script setup>
import { computed, ref } from "vue";

const props = defineProps({
  isLoading: Boolean,
});

const isLoadingIndicator = computed(() => {
  return props.isLoading ? "loading-indicator" : "";
});
</script>

<template>
  <div :class="isLoadingIndicator">
    <slot />
  </div>
</template>

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

<template>
  <with-loading-indicator :is-loading="isLoading">
    <!-- content -->
  </with-loading-indicator>
</template>

Renderless Components

เทคนิคการสร้าง Renderless Components ใน Vue

<script setup>
import { useAttrs, useSlots } from "vue";

const slots = useSlots();
const attrs = useAttrs();
</script>

<template>
  <div v-bind="attrs">
    <slot />
  </div>
</template>

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

<renderless-component>
  <!-- content -->
</renderless-component>

Best Practices

Single Responsibility Principle

หลักการออกแบบคอมโพเนนต์ให้มีหน้าที่เดียว

Keep it Simple and Stupid (KISS)

หลักการออกแบบคอมโพเนนต์ให้ง่ายและไม่ซับซ้อน

Don't Repeat Yourself (DRY)

หลักการออกแบบคอมโพเนนต์ให้ไม่ซ้ำกัน

Resources

• Vue 3 Composition API Docs
• Vue 3 Style Guide
• VueUse - Collection of Vue Composition Utilities
• Vue Test Utils - Official testing utilities for Vue
• Vue.js 3 Design Patterns