vue-awesome-swiper options设置无效

Question

子组件中封装swiper，在子组件中设置options可以生效，但父组件设置options无效。

//slider.vue 子组件
<template>
  <swiper :options="swiperOption">
    <swiper-slide></swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>

<script>
export default {
  name: 'carrousel',
  props: {
    swiperOption: {
      type: Object,
      default () {
        return {}//在这里设置有效
      }
    }
  }
}
</script>

//home.vue 父元素
<template>
<div>
  <slider :options="swiperOption"></slider>
</div>
</template>

<script>
import Slider from '@/common/slider'
export default {
  data () {
    return {
      swiperOption: {//这里设置无效
        autoplay: true,
        loop: true,
        pagination: {
          el: '.swiper-pagination'
        }
      }
  },
  components: {
    Slider
  }
}
</script>

有遇到过相同问题吗，求解答，困惑一天了。。。

Answer 1

//home.vue 父元素
<template>
<div>
  <slider :items="banners" :swiperOption="swiperOption"></slider>
</div>
</template>

你这边子组件接收的是swiperOption，你传的是options

Answer 2

你好 我也是遇到这个问题 ；但是按照上面的解决方法设置后 还是不行