子组件中的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

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

最佳答案

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

3年前 评论
讨论数量: 2

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

3年前 评论

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

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

3年前 评论

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