封装一个卡片组件

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

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

<style scoped>
.card {
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.card-body {
  padding: 20px;
}
</style>

这个卡片组件有一个可插拔的头部和尾部插槽（通过`name`属性来指定插槽名称），和一个默认插槽用于显示卡片内容。你可以在父组件中使用它：

<template>
  <div>
    <Card>
      <template v-slot:header>
        <h3>Title</h3>
      </template>
      <p>Content goes here.</p>
      <template v-slot:footer>
        <button>Read More</button>
      </template>
    </Card>
  </div>
</template>

<script>
import Card from '@/components/Card.vue';

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

这个示例中，`Card`组件被导入并注册到了当前组件中。然后在模板中使用`Card`作为标签，并在其中使用插槽来显示头部、内容和尾部。