Vue 3中的v-for指令使用详解

<template>
  <div>
    <!-- 使用v-for遍历items数组，同时使用v-slot接收子组件提供的数据 -->
    <ChildComponent v-for="(item, index) in items" :key="item.id" v-slot="{ msg }">
      <!-- 在template中显示数据和插槽内容 -->
      <div>{{ index }}: {{ item.name }} - {{ msg }}</div>
    </ChildComponent>
  </div>
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        // ...更多items
      ]
    };
  }
};
</script>

在这个例子中，我们使用v-for指令来遍历items数组，并为每个元素渲染ChildComponent组件的实例。v-slot被用来接收来自子组件的数据，并在父组件的模板中展示出来。这个例子展示了如何在Vue 3中使用v-for和v-slot来创建动态列表和插槽内容。