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

拇指一代
  • 290

父组件
<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里面是可以获取到的,求大佬帮忙,谢谢

回复
阅读 3.9k
3 个回答

你在mounted里怎么拿的?

提莫找蘑菇
  • 1.6k

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

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

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

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

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

default: () => {a:1,b:true}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏