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

amilytom

vue中父子组件进行数据传递,使用props将父组件的数据传递给子组件。我们知道可以使用两种写法:第一种就是使用数组的方式,例如:
props: ['list', 'nameObj']
这种方式,我们无法知道传递的数据的类型,复杂项目使用起来就不是那么的方便。

第二种就是使用对象的方式,指明传递的数据的类型以及默认值。例如:

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 [];
      }
    }
}

这种方式一目了然,所以项目经常使用这种方式进行数据传递。对于简单的数据类型,直接列出数据类型和默认值(default)。对于复杂数据类型Object和Array,设置默认值的时候需要通过函数的方式进行返回。
以下两种方式都是正确的:

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

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

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

学而时习
默默的学,默默的练,默默的做,慢慢的……默默无闻

雁过留声,人去留名

673 声望
6 粉丝
0 条评论
你知道吗?

雁过留声,人去留名

673 声望
6 粉丝
文章目录
宣传栏