我需要一个vue组件包含一个框上面可以放图下面可以放字然后再其父组件能够循环渲染填满网页

以下是一个简单的Vue组件，包含一个框上面可以放图下面可以放字，然后再其父组件能够循环渲染填满网页的示例代码：

<template>
  <div class="wrapper">
    <div class="box">
      <img :src="imageUrl" alt="image" class="image"/>
      <div class="content">
        <h2>{{ title }}</h2>
        <p>{{ description }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    imageUrl: {
      type: String,
      required: true
    },
    title: {
      type: String,
      required: true
    },
    description: {
      type: String,
      required: true
    }
  }
}
</script>

<style>
.wrapper {
  display: flex;
  flex-wrap: wrap;
}

.box {
  width: 25%;
  margin: 1%;
  border: 1px solid #ccc;
  box-shadow: 0 2px 2px rgba(0,0,0,0.1);
  overflow: hidden;
}

.image {
  width: 100%;
  height: auto;
}

.content {
  padding: 10px;
}
</style>

父组件中应该有一个数据源，包含多个对象，每个对象都有一个图片链接，标题和描述。然后在父组件中使用v-for循环渲染子组件，以填满网页。

<template>
  <div>
    <my-component v-for="(item, index) in items" :key="index" :image-url="item.imageUrl" :title="item.title" :description="item.description"/>
  </div>
</template>

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

export default {
  components: {
    MyComponent
  },
  data() {
    return {
      items: [
        {
          imageUrl: 'https://picsum.photos/id/237/200/300',
          title: 'Title 1',
          description: 'Description 1'
        },
        {
          imageUrl: 'https://picsum.photos/id/238/200/300',
          title: 'Title 2',
          description: 'Description 2'
        },
        {
          imageUrl: 'https://picsum.photos/id/239/200/300',
          title: 'Title 3',
          description: 'Description 3'
        },
        {
          imageUrl: 'https://picsum.photos/id/240/200/300',
          title: 'Title 4',
          description: 'Description 4'
        }
      ]
    }
  }
}
</script>