如何使用插槽创建轮播？

Question

人们不断向我展示使用图像数组创建轮播的相同方法。但这种方法不灵活，因为我希望轮播的每张幻灯片都包含一个灯箱组件。在这种情况下，我不想为我放入轮播数组中的图像重写灯箱的功能。那太好了吗？编写更少的代码并使 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 的所有概念，所以你可以告诉我解决这个问题的不同方法。

Answer 1

您可以使用 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>