这是个人的一点小笔记，记录在学习vue的过程中解决的的一些小需求
目标：在一个页面的父组件中发请求，请求API中数据分别返回到两个子组件
假设我们请求的第一个API是一个包含多个对象的数组，其中每一个对象包含如下评论信息
{
"id": 1244,
"likes": 0 ,
"liked": false,
"user_name": "学而2016",
"body": "比较轻松，期末小组做ppt"
}
我们将从这个API中获取每一个对象的body信息并将其显示在页面上
1.首先，我们创建一个part1.vue，这是第一个子组件的页面，在每一个vue组件的页面中，应该有template标签，里面包含页面上显示的内容，有style标签，控制页面的具体样式，有script标签，包含我们对页面上内容的操作。由于我们此次请求信息返回的是一个数组对象，所以我决定在数组中将其以列表的形式展示出来，在template中代码如下
<template>
<ul id="app1">
<li v-for = "item in list" >
{{ item.body }}
</li>
</ul>
</template>
对了，还没有解释，其中的item是我为返回的数组取的名字，这一步是在在script标签中进行的
<script>
export default {
data() {
return {
list:[]
}
}
}
</script>
关于页面的具体样式这里不做赘述，可自行设定，需要提醒的一点是，若用sass来写的话，应该在style标签内加入lang=‘sass’属性
2.接下来是第二个子组件part2.vue，其格式和part1.vue差不多，不过这个组件里我只想显示API返回的数组中第一个对象中的”user_name”和”id”属性，在此设第一个对象为obj，想重点提醒一下的是这两个属性在显示时要被包含在一个div中，因为一个组件中只能有一个并行的div，template中的代码如下
<template>
<div>
<div>
{{ obj.user_name }}
</div>
<div>
{{ obj.id }}
</div>
</div>
</template>
3.好了，接下来就是我们的重头戏父组件了，parent.vue
首先上代码
<template>
<div>
<div v-show="isLoading">
加载中
</div>
<courseInfo ref="courseInfo"></courseInfo>
<courseComment ref="comment"></courseComment>
</div>
</template>
<script>
import part1 from './part1'//把子组件和fecth方法import进来
import part2 from './part2'
import 'whatwg-fetch';
export default {
data() {
return {
isLoading:true
}
},
mounted () {
let promise1 = fetch("请求的API的相对路径").then( (res) => {
return res.json()
})
let promise2 = fetch("请求的API的相对路径")
.then( (res) => {
return res.json()
})
Promise.all([promise1, promise2]).then( values => {
//console.log(this.$refs.courseInfo.obj)
this.$refs.courseInfo.list= values[1]
this.$refs.comment.obj = values[0]
this.isLoading = false
})
},
components:{
"courseInfo":part1,
"courseComment":part2
}
}
</script>
接下来是几点要注意的地方：
a.由于我们这里还会使用fetch方法请求API所以还要先npm装一下fetch（如果只是在最新版的chrome中就不必如此），具体方法见fetch
b.data里面我们定义了一个isloding的值，是为了在浏览器还没有请求到数据之前先显示一个加载中的文字or信息提示一下，这个提示页面会一直存在直到所有的信息请求完毕，然后我们把isloading的值改为false转而显示页面应该显示的信息
c.然后开始请求API，由于返回的是数据流，所以用res.json() 把它转换成对象，用promise.all方法对相应的对象进行赋值操作，这里使用了v-ref子组件指定一个索引 ID，这样可以直接访问子组件，详见vue组件
d.重点强调一下promise.all是等待其参数全部请求成功返回后才会进行下一步的操作，这就正好满足我们希望两个promise成功就拿掉loading页面转而显示请求到的信息这一要求，我们将会在promise.all后的then中将isloading的值改为false
e.最后不要忘记了在component中注册一下子组件哦，这样才能在相应的template中用标签形式引入。