1 2 3 4 5 6 7 8 9 10 | < 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组件
在新页面中我的代码是这样的:
1 2 3 4 5 | < 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来继续操作