子组件中的props某个元素是数组，使用默认值正常，父组件传值报错。

这是子组件的props：

form: {
  type: Object,
  default: () => {
    return {
      info: {
        id: 1，
        time: ['2021-03-01', '2021-03-21']
      }
    }
  }
}

模板中使用

{{ form.info.time[0] }} - {{ form.info.time[1] }}

如果父组件不传值，就正常显示，也不报错。如果父组件传值，也能正常显示，但会报错：

this.form.info.time is undefined

搞不明白为什么会这样子。

暂无个人描述~

whitek

课程读者 62 声望

最佳答案

父组件传值也要初始化成{info:{time:[]}}

3年前评论

讨论数量: 2

whitek

课程读者 62 声望

父组件传值也要初始化成{info:{time:[]}}

3年前评论

wj2015

版主 853 声望

这里父页面传值的时候不应该只传数组，应该传为 {info:{id: 1, time:['xxx', 'xxx']}} 的形式，另外这种嵌套层级的数据访问，最好用前判断下是否存在，比如用计算属性做下字符串拼接和数据类型错误时候的兜底展示。

更好的解决方式是约束入参，比如用 TS 指定 Prop 需要的数据类型（如果还能折腾的话）

3年前评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容，与人为善，比聪明更重要！

帮助