人们一直向我展示用图像数组创建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好,所以你可以告诉我不同的方法来解决这个问题。
1条答案
按热度按时间svdrlsy41#
您可以使用
setup
函数的slots
参数访问组件中的slot元素(也可用于useSlots()
组件,它等效于选项API中的this.$slots
)。然后你就能知道它包含了多少元素。