解决了axios第一座大山,就来到了第二座,可预见的是第三座应该是vuex。废话不多说,直奔主题。
首先,假设一个场景。有一个mooc数据文件,然后有一个父组件,父组件有若干个子组件,每一个子组件都需要到mooc提取数据。问题来了,如果让每一个子组件去获取,假设有10个子组件,那么就需要发送10个axios请求,这对性能是不好的。所以现在只让父组件去获取,这样就可以只发一个请求。问题又来了,父组件如何传值给子组件呢?
现在有五个子组件,那么父组件就需要在data()里面写五个,分别传值给他们。先不管父组件如何去拿到这些值并且分配给他们。现在只需要关心传值的通道。代码如下,格式为: :variate="variate"
<home-header :city="city"></home-header>
<home-swiper :swiperList="swiperList"></home-swiper>
<home-icons :iconsList="iconsList"></home-icons>
<home-recommend :recommendList="recommendList"></home-recommend>
<home-weekend :weekendList="weekendList"></home-weekend>
问题来了,variate从哪儿来?
data(){
//要格外注意这里的类型,不能填错
return {
city:"",
swiperList:[],
iconsList:[],
recommendList:[],
weekendList:[],
}
}
为什么要这样写,首先这个父组件是相对的,所以data也需要return。 还有一个关键的地方,就是在写variate的时候,要根据mooc数据的类型来写。但是不能写array、string等
说完了传值通道的建立,在来说说子组件是如何使用的。以header为例子,使用props属性从父组件获取city,并且还需要声明类型,并且要写String、Array等,开头要大写
export default {
name:"HomeHeader",
props:{
city:String
}
}
最后来说说父组件如何获取的值呢?话不多说,到此为止
// 将mooc数据里的data赋值给res
res=res.data
//然后判断一下,获取的res是否正确,因为ret为true
if(res.ret){
const data=res.data
this.city=data.city
this.swiperList=data.swiperList
this.iconsList=data.iconsList
this.recommendList=data.recommendList
this.weekendList=data.weekendList
}
网友评论