vue子组件无法获取父组件传下来的对象的属性值

问题描述

  1. 父组件在 data(){}中初始化名为spaceData的数据

    spaceData: {
      title: null,
      desc: null,
    }
  2. 父组件加载时(created(){})会从后端获取数据data,并赋值到spaceData中,输出到界面中

    this.spaceData.title = data.title;
    this.spaceData.desc = data.desc;
  3. 父组件使用路由嵌套子组件,并将spaceData传下去

    <router-view
      :spaceData="spaceData"
    ></router-view>
  4. 子组件使用props正常获取数据

    props: {
      spaceData: {
        type: Object,
        required: true,
      },
    },
  5. 问题来了,这时在子组件中,使用console.log(this.spaceData),可以看到正确数据,但是console.log(this.spaceData.title)就显示为null

    clipboard.png

    clipboard.png

问题出现的环境背景及自己尝试过哪些方法

  1. 我尝试过使用JSON转码,但结果依然是null

    clipboard.png

    clipboard.png

  2. 我尝试在父组件中使用this.$setspaceData赋值,但是结果没有变化
  3. 我尝试用watch监听spaceData但监听不到变化

你期待的结果是什么?

因为当前父组件已经向后端请求过数据,不想子组件加载时再请求一次,期待可以用props的方法解决这个问题!

回答:

使用watch监听spaceData试一下

回答:

在赋值的时候也像定义数据的时候一样写法:

spaceData: {
  title: 1,
  desc: 2,
}

然后在监听里面就可以得到具体属性了

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注