子组件SwiperBanner
<!-- -->
<template>
<div class="swiper">
<van-swipe :autoplay=""
indicator-color="white">
<van-swipe-item v-for="(item,index) in imgList"
:key="index">
<img :src="item.img"
alt=""
title="" />
</van-swipe-item>
</van-swipe>
</div>
</template> <script>
import Vue from 'vue';
import { Swipe, SwipeItem } from 'vant';
Vue.use(Swipe).use(SwipeItem);
export default {
name: 'swiper',
props: {
imgList: {
type: Array,
required: true
},
aaa: '',
},
data () {
return {
};
},
}
</script>
<style lang='scss' >
.swiper {
width: %;
height: 4rem;
.van-swipe {
height: 4rem;
img {
height: %;
width: %;
}
}
}
</style>
父组件
<!-- -->
<template>
<div class="goodsDetails">
商品详情{{goodsId}}
<SwiperBanner :imgList="imgList"
:aaa="aaa"></SwiperBanner>
</div>
</template> <script>
import SwiperBanner from "@/components/SwiperBanner.vue"
export default {
components: {
SwiperBanner,
},
data () {
return {
goodsId: '',
imgList: [
{ img: "https://img.yzcdn.cn/vant/apple-1.jpg" },
{ img: "http://file02.16sucai.com/d/file/2014/0704/e53c868ee9e8e7b28c424b56afe2066d.jpg" },
{ img: "https://img.yzcdn.cn/vant/apple-1.jpg" },
{ img: "http://file02.16sucai.com/d/file/2014/0704/e53c868ee9e8e7b28c424b56afe2066d.jpg" },
],
aaa: 'wwwww'
};
},
mounted () {
var that = this
that.getGoodsId()
},
methods: {
// 获取参数
getGoodsId () {
var that = this
that.goodsId = this.$route.query.goodsId
}
},
} </script>
<style lang='scss' >
</style>