使用v-for渲染一个复用的组件

要使用 v-for 渲染一个复用的组件，我们需要在组件中使用聚合插槽（Scoped Slots）来接收 v-for 循环的数据。聚合插槽允许组件暴露出一个或多个插槽供父组件动态地填充内容。

以下是一个示例，它展示如何使用 v-for 渲染一个名为 todo-item 的组件：

• 首先，我们需要在 todo-item 组件中声明一个名为 todo 的 props，该 props 用于接收 v-for 循环的数据。

<!-- todo-item.vue -->
<template>
  <div class="todo-item">
    <!-- 使用聚合插槽来接收父组件动态填充的内容 -->
    <slot :todo="todo"></slot>
  </div>
</template>

<script>
export default {
  name: "todo-item",
  props: {
    todo: {
      type: Object,
      required: true
    }
  }
};
</script>

• 接下来，我们在父组件中使用 v-for 循环来渲染 todo-item 组件，并通过插槽向 todo-item 传递数据。

<!-- parent.vue -->
<template>
  <div class="todo-list">
    <todo-item v-for="(todo, index) in todos" :key="index">
      <!-- 使用插槽向组件传递数据 -->
      <template v-slot="{ todo }">
        {{ todo.text }}
      </template>
    </todo-item>
  </div>
</template>

<script>
import TodoItem from './todo-item.vue';

export default {
  name: "parent",
  components: {
    TodoItem
  },
  data() {
    return {
      todos: [
        { text: "Learn Vue" },
        { text: "Build an app" },
        { text: "Deploy to production" }
      ]
    };
  }
};
</script>;

在这个示例中，parent 组件通过 v-for 循环遍历 todos 数组中的每个项，并为每个项创建一个 todo-item 组件实例。通过 <template v-slot=“{ todo }”> 声明的插槽，我们将 todo 对象传递给了 todo-item 组件，以供它自己的模板使用。

在 todo-item 组件中，我们声明了一个聚合插槽：<slot :todo=“todo”></slot>。这个插槽接收了 todo 对象，并将它传递给了父组件填充的具名插槽。

父组件传递给 todo-item 组件的数据可以在插槽模板中使用。在上述示例中，我们通过 {{ todo.text }} 显示了 todo 对象中的文本内容。