反而是下面的swiper-slide获取到了宽度...

base/scrollbar/index.vue

---------------------------------------------------------

<!--基础scroll组件-->
<!--将swiper当作容器来滑动里面的内容-->
<template>
   <swiper :option="swiperOptions">
     <swiper-slide>
       <slot></slot>
     </swiper-slide>
     <div class="swiper-scrollbar" v-if="scrollbar" slot="scrollbar"></div>
   </swiper>
</template>

<script>
import {swiper, swiperSlide} from 'vue-awesome-swiper';

export default {
   name: 'MeScroll',
components: {
     swiper,
swiperSlide
   },
props: {
     scrollbar: {
       type: Boolean,
default: true
}
   },
data() {
     return {
       swiperOptions: {
         direction: 'vertical',
slidesPerView: 'auto',
freeMode: true,
setWrapperSize: true,
scrollbar: {
           el: this.scrollbar ? '.swiper-scrollbar' : null,
hide: true
}
         },
}
   }
 }
</script>

<style lang="scss" scoped>
.swiper-container {
   height: 100%;
}

</style>

pages/home/index.vue

--------------------------------------------------------------------------------

<template>
 <div class="home">
   <header class="g-header-container">
     <home-header></home-header>
   </header>
   <me-scroll>
     <home-slider></home-slider>
     <home-slider></home-slider>
     <home-slider></home-slider>
     <home-slider></home-slider>
     <home-slider></home-slider>
     <home-slider></home-slider>
   </me-scroll>
   <div class="g-backTop-container"></div>
    <router-view></router-view>
 </div>
</template>

<script>
import MeScroll from 'base/scrollbar'
import HomeHeader from './header';
import HomeSlider from './slider';
export default {
   name: 'Home',
components: {
     HomeHeader,
HomeSlider,
MeScroll
   }
 };
</script>

<style lang="scss" scoped>
@import '~assets/scss/mixins';

.home {
   overflow:hidden;
width: 100%;
height: 100%;
background-color:$bgc-theme;
}

</style>

home/slider.vue

---------------------------------------------------------------

<!--首页slider组件-->
<template>
 <div class="slider-wrapper">
   <me-loading  class="slider-wrapper" inline
   v-if="!sliders.length"
></me-loading>
<!--传参给基础组件-->
<me-slider
:direction="direction"
:loop="loop"
:interval="interval"
:pagination="pagination"
v-else
>
     <swiper-slide v-for="(item ,index) in sliders"
:key="index">
       <a :href="item.linkUrl" class="slider-link">
         <img :src="item.picUrl" alt="" class="slider-img">
       </a>
     </swiper-slide>
   </me-slider>
 </div>
</template>

<script>
import MeSlider from 'base/slider';
import {swiperSlide} from 'vue-awesome-swiper';
import {sliderOptions} from './config';
import {getHomeSlider} from '../../api/home';
import MeLoading from 'base/loading';

export default {
   name: 'HomeSlider',
components: {
     MeSlider,
MeLoading,
swiperSlide
   },
data() {
     return {
       direction: sliderOptions.direction,
loop: sliderOptions.loop,
interval: sliderOptions.interval,
pagination: sliderOptions.pagination,
sliders: []
     };
},
created() {
     this.getSliders();
},
methods: {
     getSliders() {
       getHomeSlider().then(data => {
         this.sliders = data;
});
}
   }
 };
</script>

<style lang="scss" scoped>
.slider-wrapper {
   height: 183px;
}

 .slider-link {
   display: block;
}

 .slider-link,.slider-img {
   width: 100%;
height: 100%;
}
</style>