1、先建立子組件slider

  <template>
     <div>
     <!-- auto-play="true" interval="3000"  自動輪播 輪播時間 
       具體看官網(wǎng)http://weex.apache.org/cn/references/components/slider.html
        圖片必須設(shè)置高度
        這里的圖片在頁面看其實是背景圖
        indicator  輪播圖指示器   樣式設(shè)計看css
  -->
        <slider class="sliders" auto-play="true" interval="3000">
            <div v-for="(item,index) in imgList" :key="index">
                <image :src="item.src"  class="home-img"></image>
            </div>
             <indicator class="indicator"></indicator>
        </slider>
    </div>
</template>
<script>
      export default {
            props:['imgList'],  //接收父組件傳來的數(shù)據(jù)
            data() {
                return {
                    list: []
                }
            }
        }

</script>
<style>
    .sliders{
        position:relative;
        width: 750px;
        height: 500px;
    }
    .home-img{
        width: 750px;
        height: 500px;
    }
    .indicator {
        width: 750px;
        height: 80px;
        item-color: #fff;
        item-selected-color: #3B97FF;  //選擇的顏色
        item-size: 25px;   //指示器的大小
        position: absolute;
        bottom:0;
        right:0px; 
  }
</style>

2尝盼、父組件 index.vue

  <template>
     <div>
       <v-sliders :imgList="list"></v-sliders>
    </div>
</template>
<script>
    import sliders from '../../components/common/slider.vue'
      export default {
          components:{
              "v-sliders":sliders
          },
            data() {
                return {
                    list: [{
                            title: 'item A',
                            src: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'
                        },
                        {
                            title: 'item B',
                            src: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'
                        },
                        {
                            title: 'item C',
                            src: 'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'
                        }]
                }
            }
        }
</script>
<style>
   
</style>