关于轮播图作为component的疑问

Question

<template>
    <section :class="cname">
        <swiper :options="options" :not-text-tick="options.notNextTick">
            <swiper-slide v-for="line in lines" :key="line.id">
                <slot name="lines"/>
            </swiper-slide>
            <div slot="scrollbar" class="swiper-scrollbar"/>
        </swiper>
    </section>
</template>

这个是我定义的LSlider组件，中间定义了一个slot，可以插入任意元素。
我另外还有定义一个Line组件。
现在是需要在新的页面中使用LSlider，并且在LSlider里面使用Line组件
在新页面中我的代码是这样的：

<Lslider :lines="lines" :cname="$style.slider" :pname="$style.pagination">
    <ul slot="lines">
        <Lines v-for="line in lines" :key="line.id" :class="$style.line" :title="line.title" :level="line.level" :num="line.num" :price="line.price" :src="line.src"/>
    </ul>
</Lslider>

现在的需求是在新的页面中data数据lines是一个有6个元素的数组，需要在轮播图中每个轮播图显示3个，上述代码麻烦老师指导下应该如何修改，或者是否需要computed计算后重新使用，麻烦老师指导下，谢谢

因为轮播图作为component获取数据是<Lslider :lines="lines">的，即使是把lines数据改为二维数组，我也没法直接获取类似v-for="line in lines"，里的line来继续操作

Answer 1

快乐动起来呀 2018-05-09 22:05:13

问题点是什么

• 提问者 冷丶布丁 #1

  课程里的是直接在轮播图Slider中使用传入data数据直接显示每张图片img。而我要做的是在轮播图Slider中，每个图片用3个Lines代替。

• 快乐动起来呀 回复 提问者 冷丶布丁 #2

  私聊我吧

• 提问者 冷丶布丁 回复 快乐动起来呀 #3

  不知道慕课网怎么私聊，已经加您qq，但是发送不过去。。。是不是不小心被您拉黑了

Answer 2

提问者 冷丶布丁 2018-05-09 20:54:46

因为轮播图作为component获取数据是<Lslider :lines="lines">的，即使是把lines数据改为二维数组，我也没法直接获取类似v-for="line in lines"，里的line来继续操作