When using VUE developed, sometimes, we need to pass through a parent component sub-assemblies like data or to prevent each sub-assembly will occur request data events, which lead to code redundancy, so that we can put in the same module All subcomponents request events are put in to deal with the parent component.
1, parent component by way of property value to pass subassembly
// Note: ": city" and: What is the name "swiperList" as defined herein, sub-assemblies in the name of what is received props
// "city" and "swiper" is defined in the name of your data
<home-header :city='city'></home-header>
<home-swiper :swiperList='swiper'></home-swiper>
// js in
// data in well defined parameter names, methods to obtain data and assigned to the parameter data in
data(){
return{
city:'',
swiper:[]
}
},
methods:{
getHomeInfo (){
axios.get('/api/index.json')
.then(this.getHomeInfoSuccess)
},
getHomeInfoSuccess(res){
// This is inside the structure of data acquisition depends on your own interface to return to the structure
res = res.data
if(res.ret && res.data){
const data = res.data
this.city = data.city
this.swiper = data.swiperList
}
}
},
2、子组件使用props接收父组件传递的属性
子组件props中接收的参数只需要给其定义好数据类型即可！
Header子组件中：
<div class="header-right">
{{ this.city }}
<span class="iconfont arrow-icon"></span>
</div>
//js中
props:{
city:String
}
Swiper子组件中：
<swiper :options="swiperOption">
<swiper-slide v-for="item in swiperList" :key="item.id">
<img class="swiper-img" :src="item.imgUrl" alt="">
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
//js中
props:{
swiperList: Array
}