要使用 v-for 渲染一个复用的组件,我们需要在组件中使用聚合插槽(Scoped Slots)来接收 v-for 循环的数据。聚合插槽允许组件暴露出一个或多个插槽供父组件动态地填充内容。
以下是一个示例,它展示如何使用 v-for 渲染一个名为 todo-item 的组件:
- 首先,我们需要在 todo-item 组件中声明一个名为 todo 的 props,该 props 用于接收 v-for 循环的数据。
<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 对象中的文本内容。