使用轮播组件时对组件里的参数进行数据改造

这里自己写了一个轮播组件Swipe.vue

<template>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swp-page swiper-slide" v-for="list in lists">
          <a class="js-no-follow" :href="list.clickUrl">
            <img class="goods-main-photo fadeIn" :src="list.img">
          </a>
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
</template>
<script>
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
export default {
    name: 'Swipe',
    props: {
      lists: {
        required: true
      },
      name: {}
    },
    mounted(){
      new Swiper('.swiper-container',{
        loop: true,
        pagination: {
          el: '.swiper-pagination',
        },
      })
    }
}
</script>

当你在页面使用它的时候必须传入lists属性，这就是通过父组件传递给它的lists然后来渲染它里面的数据

//这里就是把bannerLists数组传给lists，Swipe组建的lists就是bannerLists
<Swipe :lists="bannerLists" name="swiper.vue" v-if="bannerLists"></Swipe>
let app = new Vue({
    el: '#app',
    data: {
        bannerLists: null
    },
    created(){
        this.getBanner()
    },
    methods: {
        getBanner(){
            axios.get(url.banner).then((res)=>{
                this.bannerLists = res.data.lists
            })
        }
    },
    components: {
        Swipe
    }
})

上面是正常的使用情况，但是有时候我们不需要给轮播图里的图片加链接，所以这时我们就需要对组件里的参数进行改造

<Swipe :lists="bannerLists" name="swiper.vue" v-if="bannerLists"></Swipe>
let app = new Vue({
  el: '#app',
  data: {
    bannerLists: null
  },
  created(){
    this.getDetails()
  },
  methods: {
    getDetails(){
      axios.post(url.defails,{id})
       .then((res)=>{
          this.detailsData = res.data.data
          this.bannerLists = []
          //这里的imgs是一个数组，里面存着多个image，
          //这里比如imgs里的内容就是['http://1.jpg','http://2.jpg']
          //遍历他们，将每一个img都添加到数组里，最后就相当于[{clickUrl: 'javascript:;',img:'http://1.jpg'},{clickUrl: 'javascript:;',img:'http://2.jpg'}]
          this.detailsData.imgs.forEach((tmp)=>{
            //tmp分别是'http://1.jpg'和'http://2.jpg'
            this.bannerLists.push({
              clickUrl: 'javascript:;',
              img: tmp
            })
          })
        })
    }
  }
})

这样轮播图就不会点击跳转了