这一篇文章有点乱,用到了很多东西,
1,封装axios
2,遍历
3,父子组件之间的通讯
我的目录结构是这样子的,接下的代码里我只写重要的一些
封装axios
1,安装axios npm install axios
2在需要封装的js文件中导入
imort axios from 'axios
3,开始封装
export function request(config){
const instance = axios.create({
baseURL:"...",
timeout:5000
}),
instance.interceptors.request=use(config){
return config
},err=>{
cosole.log(err)
}),
instance.interceptors.response=use(res=>{
retuen res.data
},err{
console.log(err)
})
return inatance(config)
}
新建另一个请求文件 new.js
import { request } from "./request";
export function getNewList(){
return request({
url:"..."
})
}
我选择创建父子组件
父:new,vue
子newlist.vue
new.vue
可以console.log(res),查看获取到数据格式
<template>
<div>
<newlist :list="list"></newlist>
</div>
</template>
<script>
import newlist from "./childComps/newList.vue"
export default {
data () {
return {
list: [],
};
},
componente:{
newlist
}
create(){
this.getNewList()
},
methods(){
getNewList(){
getNewList().then(res=>{
this.list= res.data.recommend.list;
})
}
}
</script>
newlist.vue
<template>
<div v-for="item in list" :key="item">
<a :href="item.link">
<p>{{item.title}}<p>
<img :src="item.image">
</a>
</div>
</template>
<script>
export default{
propos:{
list:{
type:Array,
default(){
return []
}
}
}
}
</script>