Vue中的属性传值

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>