vue使用Vant UI中的swiper组件及传值

子组件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>