问题一:父组件向子组件传值,子组件拿到的是空数据。
在vue中,有时需要在父组件页面调用接口时,并把数据传给子组件。一般的做法中,子组件拿不到父组件传过来的值。原因是什么捏???
原因就是:父组件跟子组件获取数据是同时进行的,自然而然,子组件拿到的是父组件传过来的空数据。父组件都还在调用接口拿数据,子组件就已经开始拿了,理想当然的拿不到嘛~
原始做法:
父组件页面
<template>
<div class="fatherView">
<son-view :data="formData"></son-view>
</div>
</template>
<script>
import sonView from '@/components/sonView'
export default{
props: {
clientId: {
type: Number
}
},
components:{
sonView
},
data(){
return{
formData:{}
}
},
created() {
this.initData()
},
methods:{
initData(){
this.$api.common.commenPost({
id:this.$props.clientId,
},'/hkeeping/forward/forwardRecordDetailById').then(res=>{
if(200==res.code){
console.log(res)
this.formData = res.data
}
})
}
}
}
</script>
要把formData传过去
子组件页面
子组件页面打印出来的是空数组,它们的执行顺序是:先打印子组件,再打印父组件接口数据
So,用一个标识判断就行了嘛,在父组件页面来个v-if,成功拿到数据把布尔标识为true,再传给子组件。。。
只需这样,子组件就能拿到有值的数据了。。。
问题二:父组件向子组件传值,父组件值更新,调用子组件方法,方法中拿到的还是旧值。
拿新值肯定是用watch啊,在子组件中用watch深度监听,新值改变就赋值嘛
既然说到watch,这里肯定又有坑了…
我传过来的值是个对象来滴,普通的watch来监听是监听不到的,就用了深度监听…
问题也解决了,本篇文章也就到这了,还有什么不懂的可以在评论区留言哈
本文章也很详细介绍了父子组件的传值拿新值问题