Vue中的属性传值

1.我们首先在父组件中通过axios获取后台传过来的数据
如果你没有后台传递数据，我们可以在static目录下去创建一个静态的JSON数据文件，在这里我创建了一个mock文件里面放了两个json文件

getHomeInfo () {
      axios.get('/api/index.json' + this.city)// 获取参数时传值 
           .then(this.getHomeInfoSuccessed, this.getHomeInfoFailed)
    }
    
    getHomeInfoSuccessed (res) {
      console.log(res)
      res = res.data
      if (res.ret && res.data) {
        const data = res.data
        this.swiperList = data.swiperList //我将数据写入当前组件中的变量 
      }
    },

此时数据就已经在当前组件的swiperList 中了

2.在组件上进行属性传值

<home-swiper :list="swiperList"></home-swiper> //：为v-bind:的缩写

在需要传入的组件上进行属性传值
这里的swiperList即为上方axios获取的数据，list为自己定义的传入数据名（你可以理解为swiperList的新变量名为list）

3.在组件页面上接受数据
（1）我们需要在props上定义一个刚刚传入的数据名

props: {
    list: ''
  }, // 你也可以直接在上面写上数据类型，限制传进来的数据类型

定义完成后，我们就可以直接在页面中使用了
如：

<swiper-slide v-for="item of list" :key="item.id" v-if="show">
      <img class="swiper-image" :src='item.imgUrl'/>
      </swiper-slide>
    <div class="swiper-pagination"  slot="pagination"></div>
  </swiper>