1.建立子元件，slider.vue

2.引入需要輪播的頁面中，

html:  用:slides=""來引用不同的資料，從而可以反覆使用slider.vue元件

<div class="slider-show">
  <slider :slides="slides"></slider>
</div>

script:(slides一致)

data () {
      return {
        invTime:2000,
        slides:[
          {
            src:require('../../../assets/image/banner/banner01.jpg'),
            title:'標題1'
          },
          {
            src:require('../../../assets/image/banner/banner02.jpg'),
            title:'標題2'
          },
          {
            src:require('../../../assets/image/banner/banner03.jpg'),
            title:'標題3'
          }
        ]
      }
    },
 

3.子元件slider.vue裡：props引用

export default{
      props:{
          slides:{
              type:Array,
              default:[]
          }
      },
      data(){
            return{

            }
      },
      mounted(){
          console.log('slide show.....')
          console.log(this.slides)

      }
  }
 

列印輸出可以看到從父元件傳來的資料。

4.子元件slider.vue:事先定好結構樣式：

<div class="slide-img">
      <a href="xxx">
        <img :src="slides[0].src" alt="" width="100%">
      </a>
    </div>

這樣可以看到圖片已經在頁面中渲染出第一張，如果slides[1],就渲染第二張，顯然，裡面放入變動的引數。符合我們後期要求

5.slider.vue script

   data(){
            return{
                nowIndex:0
            }
      },



 

slider.vue html

 <div class="slide-img">
      <a href="xxx">
        <img :src="slides[nowIndex].src" alt="" width="100%">
      </a>
    </div>
    <!--title-->
    <h3>{{slides[nowIndex].title}}</h3>
    <!--index-->
    <ul class="slide-pages">
      <li><</li>
      <li v-for="(items,index) in slides"> <!--頁碼顯示-->
        <a>{{index+1}}</a>
      </li>
      <li>></li>
    </ul>
  </div>

6，設定頁碼跳動：改變nowIndex，實現，傳入實時變動引數index（事先上面迴圈時宣告好index）

  methods:{
          goto(index){
              this.nowIndex = index
          }
      },

html：為每個元素新增方法goto方法，傳入引數index

<!--index-->
    <ul class="slide-pages">
      <li><</li>
      <li v-for="(items,index) in slides" @click="goto(index)">
        <a>{{index+1}}</a>
      </li>
      <li>></li>
    </ul>

，ok驗證成功。下一步準備：實現頁碼向前後翻頁效果


7.前翻頁後翻頁：

還是用goto方法，傳入不同引數，引數通過computed來做

computed:{
          prevIndex(){
              if(this.nowIndex == 0)
              {
                  return this.slides.length-1
              }
              else {
                  return this.nowIndex - 1
              }
          },
        nextIndex(){
              if(this.nowIndex == this.slides.length-1)
              {
                  return 0;
              }else {
                  return this.nowIndex + 1
              }
        }
      },
      methods:{
          goto(index){
              this.nowIndex = index
          }
         
      },

Html：結構裡：

<ul class="slide-pages">
      <li @click="goto(prevIndex)"><</li>
      <li v-for="(items,index) in slides" @click="goto(index)">
        <a :class="{on:index==nowIndex}">{{index+1}}</a>
      </li>
      <li @click="goto(nextIndex)">></li>
    </ul>

另：a繫結樣式：通過index引數是否與nowIndex相等來繫結

這樣基本的輪播元件完成了。