使用v-for将对象传递给组件

<template>
  <div>
    <!-- 使用v-for遍历items数组，并为每个item创建一个item-component实例 -->
    <item-component
      v-for="(item, index) in items"
      :key="index"
      :itemData="item"
    />
  </div>
</template>

<script>
import ItemComponent from './ItemComponent.vue';

export default {
  components: {
    ItemComponent
  },
  data() {
    return {
      // 假设这是我们要遍历的对象数组
      items: [
        { id: 1, name: 'Item 1', description: 'Description for item 1' },
        { id: 2, name: 'Item 2', description: 'Description for item 2' },
        // 更多的item...
      ]
    };
  }
};
</script>

<template>
  <div>
    <h3>{{ itemData.name }}</h3>
    <p>{{ itemData.description }}</p>
  </div>
</template>

<script>
export default {
  props: {
    // 定义一个prop来接收外部传递的数据
    itemData: Object
  }
};
</script>

<item-component
  v-for="item in items"
  :key="item.id" <!-- 使用唯一的id作为key -->
  :itemData="item"
/>