框架集成：11 Vue组件与HTML - 详细教程与实战指南

<template>
  <div class="product-card">
    <img :src="product.image" />
    <h3>{{ product.name }}</h3>
    <p>&yen;{{ product.price }}</p>
    <button @click="$emit('add', product)">
      加入购物车
    </button>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  product: { type: Object, required: true }
})
const emit = defineEmits(['add'])
</script>

<style scoped>
.product-card { border-radius: 8px; overflow: hidden; }
</style>

// ProductCard子组件 - Props接收数据，$emit发送事件
const ProductCard = {
  props: {
    product: { type: Object, required: true }
  },
  emits: ['add-to-cart'],
  template: `
    <div class="product-card">
      <img :src="product.image" :alt="product.name" />
      <div class="product-info">
        <p class="product-name">{{ product.name }}</p>
        <span v-for="tag in product.tags" :key="tag" class="product-tag">
          {{ tag }}
        </span>
        <p class="product-price">&yen;{{ product.price }}</p>
        <button @click="$emit('add-to-cart', product)">
          加入购物车
        </button>
      </div>
    </div>
  `
};

// Card组件 - 演示默认/具名插槽
const Card = {
  template: `
    <div class="card">
      <div v-if="$slots.header" class="card-header">
        <slot name="header"></slot>
      </div>
      <div class="card-body">
        <slot>默认内容（当没有传入内容时显示）</slot>
      </div>
      <div v-if="$slots.footer" class="card-footer">
        <slot name="footer"></slot>
      </div>
    </div>
  `
};

// 使用方式
// <card>
//   <template #header>通知</template>
//   你有3条未读消息
//   <template #footer>
//     <button>查看全部</button>
//   </template>
// </card>

// List组件 - 作用域插槽
const List = {
  props: { items: Array },
  template: `
    <div>
      <div v-for="(item, index) in items" :key="item.id">
        <slot :item="item" :index="index">
          {{ item.name }}
        </slot>
      </div>
    </div>
  `
};

// 使用方式 - 父组件自定义渲染
// <list :items="users">
//   <template #default="{ item, index }">
//     <span>{{ index + 1 }}. {{ item.name }}</span>
//     <span :style="{ color: item.role === 'admin' ? 'red' : 'blue' }">
//       {{ item.role }}
//     </span>
//   </template>
// </list>

<!-- 动态组件切换 -->
<component :is="currentTabComponent"></component>

<!-- 使用keep-alive缓存组件 -->
<keep-alive>
  <component :is="currentTabComponent"></component>
</keep-alive>

// 不推荐：直接修改props
props: ['value'],
setup(props) { props.value = 'new'; } // 不要修改!

// 推荐：通过emit通知父组件
const emit = defineEmits(['update:value']);
function updateValue(newVal) {
  emit('update:value', newVal);
}

// 不推荐：无验证的props
props: ['data', 'config']

// 推荐：完整的props定义
props: {
  data: { type: Array, required: true },
  config: { type: Object, default: () => ({}) },
  size: {
    type: String,
    default: 'medium',
    validator: (v) => ['small', 'medium', 'large'].includes(v)
  }
}