vue.js 如何使用插槽创建旋转木马?

ykejflvf  于 2023-02-24  发布在  Vue.js
关注(0)|答案(1)|浏览(181)

人们一直向我展示用图像数组创建carousel的相同方法。但这种方法不够灵活,因为我希望carousel的每张幻灯片都包含一个lightbox组件。在这种情况下,我不想为我放在carousel数组中的图像重写lightbox的功能。这很棒吗?编写更少的代码,让Vue.js中的可重用组件比以往更有用。
我发现了一个非常好的使用插槽的例子。SSENSE在GitHub上的Vue Carousel。作为一个不太精通网络开发的人,我仍然不明白他是如何让每张幻灯片上的一个插槽可见的。这是一个模板

<carousel :per-page="1" :navigate-to="someLocalProperty" :mouse-drag="false">
    <slide>
      Slide 1 Content
    </slide>
    <slide>
      Slide 2 Content
    </slide>
  </carousel>

如你所见,我们有一个父组件carousel和子组件slide。我最困难的部分是弄清楚如何从carousel中提取一些数据,如index、amount等,以创建carousel的功能。我同意用图像数组创建carousel要简单得多,但这种方法不允许我们使用carousel中的另一个组件。
我想要什么?我想以某种方式提取每个插槽的索引,在这种情况下是幻灯片,然后我可以很容易地创建功能的轮播通过改变索引。我认为有一个不同的路径创建轮播与插槽,但我仍然不理解所有的概念Vue和JavaScript好,所以你可以告诉我不同的方法来解决这个问题。

svdrlsy4

svdrlsy41#

您可以使用setup函数的slots参数访问组件中的slot元素(也可用于useSlots()组件,它等效于选项API中的this.$slots)。
然后你就能知道它包含了多少元素。

<script setup>
const slots = useSlots()

onMounted(() => {
  const defaultSlotElements = slots.default()
  console.log(`My default slot has ${defaultSlotsElements.length} elements.`)
})
</script>

相关问题