插槽的进一步使用

当前需求： 我有一个组件A，他提供了一个插槽。然后在父组件B调用，父组件使用了这个插槽，传递了组件C。现在组件A接收了组件B传入的一个数组 。我想组件A根据数组循环渲染组件C  组件C展示数组的值

实现步骤

组件 C

首先定义组件 C，用来展示数组中的值：

<template>
  <div>
    {{ value }}
  </div>
</template>

<script setup>
defineProps({
  value: String
});
</script>

组件 A

接着定义组件 A，它提供插槽并接收父组件传入的数组：

<template>
  <div>
    <!-- 使用 v-for 循环渲染插槽内容 -->
    <slot v-for="(item, index) in list" :item="item" :key="index" />
  </div>
</template>

<script setup>
const props = defineProps({
  list: {
    type: Array,
    required: true
  }
});
</script>

组件 B

在父组件 B 中使用组件 A，并通过插槽传递组件 C：

<template>
  <A :list="dataList">
    <!-- 使用 v-slot 绑定 item，并传递给组件 C -->
    <template #default="{ item }">
      <C :value="item" />
    </template>
  </A>
</template>

<script setup>
import A from './A.vue';
import C from './C.vue';

const dataList = ['Item 1', 'Item 2', 'Item 3'];
</script>