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

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

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

//这里就是把bannerLists数组传给lists，Swipe组建的lists就是bannerLists

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
    }
})

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

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
            })
          })
        })
    }
  }
})

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