vue父子组件数据传递props中Object和Array如何设置默认值

 

 

props: {
    field: {
      type: String
    },
    index: {
      type: Number,
      default: 0
    },
    isAble: {
      type: Boolean,
      default: true
    },
    rowData: {
      type: Object,
      default: function () {
        return {};
      }
    },
    btnArr: {
      type: Array,
      default: function () {
        return [];
      }
    }
}

 

对于复杂数据类型Object和Array，设置默认值的时候需要通过函数的方式进行返回。
以下两种方式都是正确的:

 

rowData: {
   type: Object,
   default() {
      return {}
   }
}

rowData: {
   type: Object,
   default: function () {
       return {}
  }
}

 

 

特别注意一点，这里不能简化成箭头函数：

 

// 这种写法是错误的
// 当父组件没有传这个值或者值是空时，输出的话，这时是返回underfind，在template中获取里面的值时，就报错
rowData: {
    type: Object,
    default: () => {}
}