鍍金池/ 問答/HTML/ vue-awesome-swiper options設(shè)置無效

vue-awesome-swiper options設(shè)置無效

子組件中封裝swiper,在子組件中設(shè)置options可以生效,但父組件設(shè)置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 {}//在這里設(shè)置有效
      }
    }
  }
}
</script>
//home.vue 父元素
<template>
<div>
  <slider :options="swiperOption"></slider>
</div>
</template>

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

有遇到過相同問題嗎,求解答,困惑一天了。。。

回答
編輯回答
懶洋洋
//home.vue 父元素
<template>
<div>
  <slider :items="banners" :swiperOption="swiperOption"></slider>
</div>
</template>

你這邊子組件接收的是swiperOption,你傳的是options

2018年9月12日 05:06