Vue.js: コンポーネント基礎

<!-- ❌ The "Broken" Version: Copy Product Card 30 times -->
<!-- In HomeView.vue -->
<div class="product-card">
  <img src="iphone.jpg">
  <h3>iPhone 15 Pro</h3>
  <p>$999</p>
  <button>Add to Cart</button>
</div>
<div class="product-card">
  <img src="macbook.jpg">
  <h3>MacBook Pro</h3>
  <p>$2499</p>
  <button>Add to Cart</button>
</div>
<!-- ... And also 28 more ... -->

<!-- The same code appears again in ProductList.vue, SearchResults.vue, Cart.vue -->

// ❌ No need SFC（String Templates，Vue 2 Style）
Vue.component('my-component', {
  template: '<div>{{ msg }}</div>',
  data() { return { msg: 'Hello' } }
})

// ✅ Use SFC (Recommended)
// MyComponent.vue
<template>
  <div>{{ msg }}</div>
</template>
<script setup>
const msg = 'Hello'
</script>

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import ProductCard from './components/ProductCard.vue'

const app = createApp(App)

// Global Registration：All components are available <ProductCard />
app.component('ProductCard', ProductCard)

app.mount('#app')

<!-- HomeView.vue -->
<script setup>
// 1. Import
import ProductCard from '@/components/ProductCard.vue'

// 2. Use in a template（No registration required，Automatically Available）
</script>

<template>
  <ProductCard :product="product" />
</template>

<!-- src/views/HomeView.vue -->
<template>
  <h1>Featured Products</h1>
  <div class="grid">
    <ProductCard 
      v-for="product in featured" 
      :key="product.id" 
      :product="product"
      @add-to-cart="handleAdd"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import ProductCard from '@/components/ProductCard.vue'
import { useCart } from '@/composables/useCart'

const featured = ref([
  { id: 1, name: 'iPhone 15 Pro', price: 999, stock: 50, image: 'iphone.jpg' },
  { id: 2, name: 'MacBook Pro', price: 2499, stock: 20, image: 'macbook.jpg' }
])

const { addToCart } = useCart()
function handleAdd(productId) {
  addToCart(productId)
}
</script>

<!-- src/views/ProductListView.vue -->
<template>
  <ProductCard 
    v-for="product in products" 
    :key="product.id" 
    :product="product"
    @add-to-cart="handleAdd"
  />
</template>

<script setup>
import ProductCard from '@/components/ProductCard.vue'
// ... Exactly the same citation，Reusable Components
</script>

Featured Products の下に iPhone 15 Pro と MacBook Pro のカードが 2 枚並ぶ
Add to Cart を押すと add-to-cart が発火し useCart の addToCart(productId) が呼ばれる

// ❌ main.js Global Registration（Not recommended）
import ProductCard from './components/ProductCard.vue'
app.component('ProductCard', ProductCard)  // The entire app is available

// ✅ HomeView.vue Local Registration（Recommendations）
<script setup>
import ProductCard from '@/components/ProductCard.vue'
// Only at HomeView.vue Available in China
</script>

グローバル登録：どのコンポーネントからでも ProductCard が解決できる（常にバンドルされる）
ローカル登録：HomeView.vue の中だけで ProductCard が解決できる

src/
├── components/          # Public Components（For use across pages）
│   ├── ProductCard.vue
│   ├── Button.vue
│   └── Header.vue
├── views/               # Page Components（For routing）
│   ├── HomeView.vue
│   ├── ProductListView.vue
│   └── DashboardView.vue
├── composables/         # Composite Functions
│   ├── useAuth.ts
│   └── useFetch.ts
├── router/              # Router Configuration
└── App.vue              # Root Component

<script setup>
defineProps({
  // Basic Types
  name: String,
  age: Number,
  active: Boolean,
  
  // Complex Types
  user: Object,
  items: Array,
  
  // Required + Default value
  title: { type: String, required: true },
  pageSize: { type: Number, default: 20 },
  
  // Validator
  email: { 
    type: String, 
    validator: (val) => val.includes('@') 
  },
  
  // Custom Types
  status: { 
    type: String, 
    validator: (val) => ['active', 'inactive'].includes(val) 
  }
})
</script>

required の title を渡さないと Vue が警告を出す
pageSize 未指定なら 20 が既定値になる
email に @ が無い、または status が active・inactive 以外だとバリデータが警告する

stock 50 → $999 と Add to Cart（有効）
stock 5 → Only 5 left バッジが追加表示される
stock 0 → Out of Stock 表示＋ボタン無効、カードは半透明になる