Vue.js: 组件基础

<!-- ❌ 翻车版：30 个商品卡片复制 30 次 -->
<!-- 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>
<!-- ... 还有 28 个 ... -->

<!-- 同样的代码又出现在 ProductList.vue、SearchResults.vue、Cart.vue 中 -->

<!-- components/ProductCard.vue - 1 个组件定义 -->
<template>
  <div class="product-card">
    <img :src="product.image">
    <h3>{{ product.name }}</h3>
    <p>${{ product.price }}</p>
    <button :disabled="product.stock === 0" @click="addToCart">
      {{ product.stock === 0 ? 'Out of Stock' : 'Add to Bag' }}
    </button>
  </div>
</template>

<script setup>
const props = defineProps({ product: Object })
const emit = defineEmits(['add-to-cart'])

function addToCart() {
  emit('add-to-cart', props.product.id)
}
</script>

<!-- HomeView.vue / ProductList.vue / SearchResults.vue 中 -->
<template>
  <ProductCard v-for="product in products" :key="product.id" :product="product" @add-to-cart="handleAdd" />
</template>

<!-- ProductCard.vue - SFC 单文件组件 -->
<template>
  <!-- 1. template：HTML 模板（必填） -->
  <div class="product-card">
    <h3>{{ product.name }}</h3>
    <p>${{ product.price }}</p>
  </div>
</template>

<script setup>
// 2. script：JS 逻辑（必填）
const { ref } = Vue

const props = defineProps({ product: Object })
const count = ref(0)
</script>

<style scoped>
/* 3. style：CSS 样式（可选） */
.product-card {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 1rem;
}
</style>

// ❌ 不用 SFC（字符串模板，Vue 2 风格）
Vue.component('my-component', {
  template: '<div>{{ msg }}</div>',
  data() { return { msg: 'Hello' } }
})

// ✅ 用 SFC（推荐）
// MyComponent.vue
<template>
  <div>{{ msg }}</div>
</template>
<script setup>
const msg = 'Hello'
</script>

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

const app = createApp(App)

// 全局注册：所有组件都能用 <ProductCard />
app.component('ProductCard', ProductCard)

app.mount('#app')

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

// 2. 在模板中使用（无需注册，自动可用）
</script>

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

<template>
  <!-- PascalCase（推荐，IDE 友好） -->
  <ProductCard />
  <UserProfile />
  
  <!-- kebab-case（也支持） -->
  <product-card />
  <user-profile />
  
  <!-- ✅ 两种都能用，PascalCase 更易读 -->
</template>

src/
├── components/          # 公共组件（跨页面用）
│   ├── ProductCard.vue
│   ├── Button.vue
│   └── Header.vue
├── views/               # 页面组件（路由用）
│   ├── HomeView.vue
│   ├── ProductListView.vue
│   └── DashboardView.vue
├── composables/         # 组合式函数
│   ├── useAuth.ts
│   └── useFetch.ts
├── router/              # 路由配置
└── App.vue              # 根组件

<!-- 父组件 Parent.vue -->
<template>
  <ProductCard :product="myProduct" :show-stock="true" />
</template>

<!-- 子组件 ProductCard.vue -->
<template>
  <div>
    <h3>{{ product.name }}</h3>
    <p v-if="showStock">Stock: {{ product.stock }}</p>
  </div>
</template>

<script setup>
// 接收父组件传的 props
const props = defineProps({
  product: { type: Object, required: true },
  showStock: { type: Boolean, default: false }
})
</script>

<!-- 子组件 ProductCard.vue -->
<template>
  <button @click="handleAdd">Add to Cart</button>
</template>

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

function handleAdd() {
  emit('add-to-cart', { id: 1, name: 'iPhone' })
}
</script>

<!-- 父组件 Parent.vue -->
<template>
  <ProductCard @add-to-cart="handleAddToCart" />
</template>

<script setup>
function handleAddToCart(product) {
  console.log('Add to cart:', product)
}
</script>

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

<style>
.product-card { border: 1px solid #e5e7eb; border-radius: 8px; padding: 1rem; margin: 0.5rem 0; transition: box-shadow 0.2s; }
.product-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.out-of-stock { opacity: 0.6; }
.price { color: #42b883; font-weight: bold; }
.stock { color: #f59e0b; font-size: 0.85rem; }
button:disabled { background: #ccc; cursor: not-allowed; }
button { background: #42b883; color: white; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; }
</style>

<div id="app">
  <h3>Featured Products</h3>
  <product-card
    v-for="product in products"
    :key="product.id"
    :product="product"
    @add-to-cart="handleAdd"
  ></product-card>
  <p>购物车商品数: {{ cartCount }}</p>
</div>

<script>
const { createApp, ref } = Vue

// 子组件：ProductCard
const ProductCard = {
  props: {
    product: {
      type: Object,
      required: true,
      validator: (val) => val.id && val.name && val.price !== undefined
    }
  },
  emits: ['add-to-cart'],
  template: `
    <div :class="['product-card', { 'out-of-stock': product.stock === 0 }]">
      <h3>{{ product.name }}</h3>
      <p class="price">${{ product.price }}</p>
      <span class="stock" v-if="product.stock < 10 && product.stock > 0">
        Only {{ product.stock }} left
      </span>
      <button
        :disabled="product.stock === 0"
        @click="$emit('add-to-cart', product.id)"
      >
        {{ product.stock === 0 ? 'Out of Stock' : 'Add to Cart' }}
      </button>
    </div>
  `
}

// 根组件
const App = {
  components: { ProductCard },
  setup() {
    const products = ref([
      { id: 1, name: 'iPhone 15 Pro', price: 999, stock: 50 },
      { id: 2, name: 'MacBook Pro', price: 2499, stock: 5 },
      { id: 3, name: 'Sold Out Item', price: 99, stock: 0 }
    ])
    const cartCount = ref(0)
    function handleAdd(id) {
      cartCount.value++
      console.log('Added to cart:', id)
    }
    return { products, cartCount, handleAdd }
  }
}

createApp(App).mount('#app')
</script>

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

<style>
.product-card { border: 1px solid #e5e7eb; border-radius: 8px; padding: 1rem; margin: 0.5rem 0; }
</style>

<div id="app">
  <!-- Page 1: 首页 Featured -->
  <h3>首页 Featured</h3>
  <product-card v-for="p in featured" :key="p.id" :product="p"></product-card>

  <!-- Page 2: 列表 All -->
  <h3>商品列表 All</h3>
  <product-card v-for="p in all" :key="p.id" :product="p"></product-card>

  <!-- Page 3: 分类 Phones -->
  <h3>分类 Phones</h3>
  <product-card v-for="p in phones" :key="p.id" :product="p"></product-card>
</div>

<script>
const { createApp, ref, computed } = Vue

const ProductCard = {
  props: ['product'],
  template: `
    <div class="product-card">
      <h4>{{ product.name }}</h4>
      <p>${{ product.price }} | 库存: {{ product.stock }}</p>
    </div>
  `
}

const App = {
  components: { ProductCard },
  setup() {
    const products = ref([
      { id: 1, name: 'iPhone', price: 999, stock: 50, category: 'phone' },
      { id: 2, name: 'MacBook', price: 2499, stock: 20, category: 'laptop' },
      { id: 3, name: 'iPad', price: 599, stock: 30, category: 'tablet' }
    ])
    const featured = computed(() => products.value.slice(0, 2))
    const all = computed(() => products.value)
    const phones = computed(() => products.value.filter(p => p.category === 'phone'))
    return { featured, all, phones }
  }
}

createApp(App).mount('#app')
</script>

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

<div id="app">
  <h3>局部注册演示</h3>
  <my-button text="按钮 A" variant="primary"></my-button>
  <my-button text="按钮 B" variant="success"></my-button>
  <my-button text="按钮 C" variant="danger"></my-button>
</div>

<script>
const { createApp } = Vue

// 子组件
const MyButton = {
  props: ['text', 'variant'],
  template: `
    <button :style="{ background: bgColor, color: 'white', padding: '6px 12px', border: 'none', borderRadius: '4px', margin: '4px' }">
      {{ text }}
    </button>
  `,
  computed: {
    bgColor() {
      return { primary: '#3b82f6', success: '#10b981', danger: '#ef4444' }[this.variant] || '#999'
    }
  }
}

// ✅ 局部注册（推荐）
const App = {
  components: { MyButton },
  template: `
    <my-button text="局部注册按钮" variant="primary"></my-button>
  `
}

const app = createApp(App)
// ❌ 全局注册（不推荐 — 整个应用都可用但 bundle 变大）
// app.component('MyButton', MyButton)
app.mount('#app')
</script>

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

<div id="app">
  <user-card
    :name="'Alice'"
    :age="25"
    :active="true"
    :user="{ id: 1, role: 'admin' }"
    :items="['Vue', 'React', 'Angular']"
    :title="'管理员'"
    :page-size="20"
    :email="'alice@example.com'"
    :status="'active'"
  ></user-card>
</div>

<script>
const { createApp } = Vue

const UserCard = {
  // props 5 大类型 + 验证器
  props: {
    // 基础类型
    name: String,
    age: Number,
    active: Boolean,

    // 复杂类型
    user: Object,
    items: Array,

    // 必填 + 默认值
    title: { type: String, required: true },
    pageSize: { type: Number, default: 20 },

    // 验证器
    email: {
      type: String,
      validator: (val) => val.includes('@')
    },
    status: {
      type: String,
      validator: (val) => ['active', 'inactive'].includes(val)
    }
  },
  template: `
    <div style="padding: 1rem; border: 1px solid #eee;">
      <h3>{{ title }} - {{ name }}</h3>
      <p>年龄: {{ age }} | 状态: {{ active ? '在线' : '离线' }}</p>
      <p>角色: {{ user.role }} | 框架: {{ items.join(', ') }}</p>
      <p>邮箱: {{ email }} | 每页: {{ pageSize }}</p>
    </div>
  `
}

const App = { components: { UserCard } }
createApp(App).mount('#app')
</script>