改变参数无效。。。轮播只能自己手动滑动才有效果。。

自己想了好久。没找到到底错在哪了。老师能不能帮忙看看

homeindex

<template>
<div class="home">
<router-view></router-view>
<div class="g-header-container">
<home-header></home-header>
</div>
<div class="g-middle-container">
<home-slider></home-slider>
</div>
<div class="g-backtop-container"></div>
</div>
</template>

<script>
import HomeHeader from './header'
import HomeSlider from './slider'
export default {
components:{
HomeHeader,
HomeSlider
},
props:{},
data(){
return {
}
},
watch:{},
computed:{},
methods:{},
created(){},
mounted(){}
}
</script>
<style lang="scss" scoped>
@import '../../assets/scss/mixins';
.home{
overflow: hidden;
width: 100%;
height: 100%;
background-color: $bgc-theme
}

</style>

homeslider

<template>
<div class="slider-wrapper">
<my-slider
:direction="direction"
:loop='loop'
:interval='interval'
:pagination='pagination'
>
<swiper-slide 
v-for="(item,index) in sliders"
:key="index"
>
<a :href="item.linkurl" class="slider-link">
<img :src="item.imgurl" alt="" class="slider-img">
</a>
</swiper-slide>
</my-slider>
</div>
</template>

<script>
import MySlider from '@/base/slider/index'
import {swiperSlide} from 'vue-awesome-swiper'

export default {
components:{
MySlider,
swiperSlide
},
props:{},
data(){
return {
direction: "",
loop: false,
interval: 0,
pagination: true,
sliders: [
{
'linkurl':'http://www.baidu.com',
'imgurl':require('./1.jpg')
},
{
'linkurl':'http://www.baidu.com',
'imgurl':require('./2.jpg')
},
{
'linkurl':'http://www.baidu.com',
'imgurl':require('./3.jpg')
},
{
'linkurl':'http://www.baidu.com',
'imgurl':require('./4.jpg')
}

]

}
},
watch:{},
computed:{},
methods:{},
created(){},
mounted(){}
}
</script>
<style lang="scss" scoped>
.slider-wrapper{
height: 183px;
}
.slider-link,
.slider-img{
width: 100%;
height: 100%;
}
</style>

sliderindex

<template>
<swiper :options='swiperOption'>
<!-- 此为只正对本项目的写法 -->
<!-- <swiper-slide v-for="item in sliders">
          <a href="">
              <img src="" alt="">
          </a>
      </swiper-slide> -->
<slot></slot>
<!-- 分页器,决定是否需要分页 -->
<div class="swiper-pagination" v-if="pagination" slot="pagination"></div>
</swiper>
</template>

<script>
import {swiper} from 'vue-awesome-swiper';
import 'swiper/dist/css/swiper.css';
export default {
components:{
swiper,

},
props:{
direction: {
type: String,
default: 'horizontal',
validator(value) {
return [
'horizontal',
'vertical'
].indexOf(value) > -1;
}
},
interval: {
type: Number,
default: 3000,
validator(value) {
return value >= 0;
}
},
loop: {
type: Boolean,
default: true
},
pagination: {
type: Boolean,
default: true
}
},
data(){
return {
swiperOptions: {
watchOverflow: true,
direction: this.direction,
autoplay: this.interval ? {
delay: this.interval,
disableOnInteraction: false
} : false,
slidesPerView: 1,
loop: this.data.length <= 1 ? false : this.loop,
pagination: {
el: this.pagination ? '.swiper-pagination' : null
}
}
}
},
watch:{},
computed:{},
methods:{},
created(){},
mounted(){}
}
</script>
<style lang="scss" scoped>
</style>