Vue 渐进式JavaScript 框架 基于Vue2的移动端项目：详情剧照
目录
详情
剧照
在详情detailView.vue文件中增加剧照。
增加剧照模块
直接复制演职人员全部结构，改为剧照。
修改渲染字段和图片路径，并删除名称和角色名称。
示例如下：
<div>
<div class="name">剧照</div>
<detail-swiper>
<detail-swiper-item v-for="(data, index) in filmInfo.photos" :key="index">
<div :style="{backgroundImage: 'url('+ data +')'}" class="avatar"></div>
</detail-swiper-item>
</detail-swiper>
</div>
设置轮播显示数量
组件间传值，设置perview动态绑定属性，设置轮播图显示几个。
组件内接收值
在DetailSwiper.vue组件内接收值，设置为数字类型，
并在实例化Swiper时使用perview属性。
示例如下：
export default {
props: {
perview: {
type: Number,
default: 1
}
},
mounted () {
new Swiper('.demo', {
// 设置一页显示多个
slidesPerView: this.perview,
spaceBetween: 30,
freeMode: true
})
}
}
轮播冲突
出现问题，单独使用都没问题，现在后面设置2个时，前面演职人员也变成2个。
同页面swiper实例化2次，类名是一样的，后面的就会按照后面的配置重新实例化。
如下：
解决
在原来基础上，增加name传值。
export default {
props: {
perview: {
type: Number,
default: 1
},
name: {
type: String,
default: 'demo'
}
},组件中设置动态类名
实例化时也改为传递的值
调用组件时传递的值
<div class="name">演职人员</div>
<detail-swiper :perview="3.5" name="actor">
<div class="name">剧照</div>
<detail-swiper :perview="2" name="photos">最后效果：
总结
Vue 渐进式JavaScript 框架 基于Vue2的移动端项目：详情剧照