老师，您的slider组件应该怎样扩展？

来源：5-13 首页-新品推荐

qq_小柒_13

2018-08-06

老师，如果新品推荐里的这些商品下面的文字内容不包含在图片里，您的这个slider组件应该怎么样扩展？

写回答

2回答

qq_小柒_13

提问者

2018-08-06

又仔细看了一下，好像用作用域插槽会更好？

// Slider.vue
<template>
    <section :class="cname">
        <swiper :options="options" :not-next-tick="options.noNextTick">
            <swiperSlide v-for="(item) in items" :key="item.id">
                <router-link :to="{name : item.href}">
                    <img :src="item.src" alt="">
                    <slot :item="item" />
                </router-link>
            </swiperSlide>
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </section>
</template>

// App.vue
<template>
    <div id="app">
        <slider :options="sliderOption" :items="items" cname="productSlider">
            <template slot-scope="{ item }">
                <div class="exa">
                <p class="name">{{item.name}}</p>
                <p class="price">
                    <span>¥{{item.price}}</span>
                    <span v-if="item.origin">市场价: ¥<em>{{item.origin}}</em></span>
                    <i class="icon"></i>
                </p>
                </div>
            </template>
        </slider>
    </div>
</template>

qq_小柒_13

提问者

2018-08-06

提了问题之后研究了一下，写成了这个样子

// Slider.vue
<template>
    <section :class="cname">
        <swiper :options="options" :not-next-tick="options.noNextTick">
            <swiperSlide v-for="(item, index) in items" :key="item.id">
                <router-link :to="{name : item.href}">
                    <img :src="item.src" alt="">
                    <slot :name="index" />
                </router-link>
            </swiperSlide>
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </section>
</template>

// App.vue
<template>
    <div id="app">
        <slider :options="sliderOption" :items="items" cname="productSlider">
            <template v-for="(item, index) of items" :slot="index">
                <div class="exa" :key="item.src" >
                    <p class="name">{{item.name}}</p>
                        <p class="price">
                        <span>¥{{item.price}}</span>
                        <span v-if="item.origin">市场价: ¥<em>{{item.origin}}</em></span>
                        <i class="icon"></i>
                    </p>
                </div>
            </template>
        </slider>
    </div>
</template>

麻烦老师看下，这样写可以吗？

前端面试项目冲刺京东金融Vue组件化实战

透过京东金融项目理解组件化思维与项目面试，提升你的综合能力

922 学习 · 309 问题

查看课程

相似问题

slider组件

回答 1

老师，vue组件中引用的sass样式无法显示，我发现是标签中的样式名和生成的样式名不同导致的，该怎样解决呀

回答 2

关于课程中组件化的问题

回答 1

关于父组件修改子组件的样式

回答 1

功能组件和业务组件

回答 1

打开慕课网App查看更多内容