人们不断向我展示使用图像数组创建轮播的相同方法。但这种方法不灵活，因为我希望轮播的每张幻灯片都包含一个灯箱组件。在这种情况下，我不想为我放入轮播数组中的图像重写灯箱的功能。那太好了吗？编写更少的代码并使 Vue.js 中的可重用组件比以往更加有用。
我发现了一个使用插槽的非常好的例子。 GitHub 上 SSENSE 的 Vue Carousel。作为一个不太精通网络开发人员，我仍然不明白他是如何让每张幻灯片显示一个插槽的。这是一个模板
<carousel :per-page="1" :navigate-to="someLocalProperty" :mouse-drag="false">
<slide>
Slide 1 Content
</slide>
<slide>
Slide 2 Content
</slide>
</carousel>
如您所见，我们有一个父组件轮播和子组件幻灯片。对我来说最困难的部分是弄清楚如何从中提取一些数据，如索引、金额等，以创建轮播的功能。我同意用图像数组创建轮播要简单得多，但这种方法不允许我们在轮播中使用另一个组件。
我想要什么？我想以某种方式提取在这种情况下滑动的每个插槽的索引，然后我可以通过更改索引轻松地为轮播创建功能。我认为用槽创建轮播有不同的路径，但我仍然不太理解 Vue 和 JavaScript 的所有概念，所以你可以告诉我解决这个问题的不同方法。
您可以使用
setup函数的slots参数访问组件中的槽元素（也可与useSlots()组件一起使用，它相当于this.$slots在选项 API 中）。然后就可以知道它包含了多少个元素。
<script setup> const slots = useSlots() onMounted(() => { const defaultSlotElements = slots.default() console.log(`My default slot has ${defaultSlotsElements.length} elements.`) }) </script>