vue父组件获取数据给子组件传数据props，子组件获取不到

Question

父组件
<BaseInfo ref="baseInfo" id="editor_2" :oceanDeatilList="oceanDeatilList"></BaseInfo>

data() {
        return {
            oceanDeatilList:{}
        }
    },

获取数据

getOceanDetail() {
            EntryOceanDetail(this.entryId).then(res=> {
                 this.oceanDeatilList = res.data
             })
        }

子组件

props:{
        oceanDeatilList:{
            type: Object,
            default: () => {}
        }
    },
    watch: {
        oceanDeatilList: {
            deep:true,
            handler(newVal,oldVal){
                this.oceanOldDeatilList = newVal
            }
        }
    }

在子组件的mounted里面获取不到 在watch里面是可以获取到的，求大佬帮忙，谢谢

Answer 1

你在mounted里怎么拿的？

Answer 2

你的获取数据getOceanDetail是在哪个生命周期执行的。父子组件你要明白他们的生命周期执行顺序。

// 列出主要的步骤
1. 父组件的 created
2. 父组件的 beforeMount
3. 子组件的 created
4. 子组件的 mounted
5. 父组件的 mounted

上面的生命周期顺序，如果你父组件在 mounted 中调用，则子组件 mounted 则不会知道那些变化了，应该父组件都还没有执行

oceanDeatilList是空的对象，vue不能检测到对象的属性变化，你需要将oceanDeatilList里面的属性写全，这样就可以了。或者使用this.$set()方法。watch里面可以，因为你用了deep 任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深

Answer 3

子组件中oceanDeatilList是不是被调用了，你把这个给一些基本默认值 比如

default: () => {a:1,b:true}