vue setup 带图片的卡片组件封装

可以使用Vue 3的`<script setup>`语法糖来封装一个带图片的卡片组件。

<template>
  <div class="card">
    <img :src="image" alt="Card Image" />
    <div class="card-body">
      <slot></slot>
    </div>
  </div>
</template>

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

const props = defineProps({
  image: {
    type: String,
    required: true
  }
})
</script>

<style>
.card {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px;
  margin: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}

.card-body {
  text-align: center;
}
</style>

在上面的代码中，我们通过`defineProps`来定义一个`image`属性，并且指定它的类型为字符串，并且是必需的。然后，在模板中使用这个属性来显示卡片的图片。我们还可以使用`<slot>`来插入卡片的内容。

最后，我们还定义了一些样式来美化卡片的样式。

使用这个组件，你可以像下面这样来传递图片和内容：

<template>
  <div>
    <card image="https://picsum.photos/200">
      <h2>Card Title</h2>
      <p>Card Content Goes Here...</p>
    </card>
  </div>
</template>

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

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

这样就可以生成一个带图片的卡片组件了。