实际开发中,为了减少代码量,通常会写组件来进行复用,这就牵扯到了组件间得参数传递,假如我们写的组件中 需要调用接口 来渲染组件得数据,而调用组件中接口得入参又需要从父组件中调用接口来获得的,那么这就会发生问题,如果两个接口的速度一样快还好 ,可是一旦子组件中接口的速度快,而父组件中的接口的速度慢的话,就会发生组件中想要调用接口的入参是 空 没有 ,这样接口调用不成功,子组件中的数据就渲染不出来,那么怎么解决这个问题那?
首先我们假设 需要用父组件中的接口返回的code 传递给子组件 ,子组件中用code调用接口,来查询学生信息
这里我们用setTimeout 模拟接口
父组件
<template>
<div id="app">
<alert :code='code' ref="alert"></alert>
</div>
</template>
<script>
import alert from '@/components/alert.vue'
export default {
components:{alert},
data() {
return {
code:''
}
},
created() {
this.getData()
},
methods: {
getData(){
setTimeout(() => {
this.code = 123
}, 1000);
},
}
}
子组件
<template>
<div>
<div>
学生姓名:{{user.name}}
</div>
<div>
学生年龄:{{user.age}}
</div>
</div>
</template>
<script>
export default {
props: ['code'],
data() {
return {
user: {}
}
},
created() {
console.log(this.code);
setTimeout(() => {
if (this.code == 123) {
this.user = {
name: '小明',
age: 18
}
}
}, 500);
},
watch: {
code(val, old) {
// console.log(val);
// setTimeout(() => {
// if (val == 123) {
// this.user = {
// name: '小明',
// age: 18
// }
// }
// }, 500);
}
}
}
上面的代码一运行之后 效果是这样的
我们看控制台 获取不到code 是因为 父组件中接口慢 导致 传递过来的code 是空
我们可以用监听watch 监听code 在监听里面调用接口 这样就保证 父组件传过来的code 一定能接收到 无论接口的快慢
我们看 这样 数据成功被渲染了出来 控制台上 code 也被打印了出来