vue3封装一个卡片组件

好的，下面是一个简单的 Vue3 卡片组件封装示例：

<template>
  <div class="card">
    <div class="card-header">
      <slot name="header"></slot>
    </div>
    <div class="card-body">
      <slot></slot>
    </div>
    <div class="card-footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'Card',
  props: {
    title: {
      type: String,
      default: ''
    }
  }
})
</script>

<style scoped>
.card {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.card-header {
  padding: 16px;
  border-bottom: 1px solid #e8e8e8;
}

.card-footer {
  padding: 16px;
  border-top: 1px solid #e8e8e8;
}
</style>

这是一个基础的卡片组件，包含了一个头部、一个主体和一个底部插槽。你可以根据实际需求进行扩展和修改。在父组件中使用该组件：

<template>
  <Card title="标题">
    <template #header>
      <h2>自定义头部</h2>
    </template>
    <p>这是卡片的主体内容</p>
    <template #footer>
      <button>点击</button>
    </template>
  </Card>
</template>

<script>
import Card from './Card.vue'

export default {
  components: {
    Card
  }
}
</script>

通过嵌套插槽，我们可以轻松地在父组件中自定义卡片的头部和底部，同时将主体内容作为默认插槽传递给子组件。