vue父子组件数据传递props中Object和Array如何设置默认值
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 {}
}
}【vue父子组件数据传递props中Object和Array如何设置默认值】特别注意一点，这里不能简化成箭头函数：
// 这种写法是错误的
// 当父组件没有传这个值或者值是空时，输出的话，这时是返回underfind，在template中获取里面的值时，就报错
rowData: {
type: Object,
default: () => {}
}推荐阅读
- vue-cli|vue-cli 3.x vue.config.js 配置
- 2020-04-07vue中Axios的封装和API接口的管理
- VueX--VUE核心插件
- 动态组件与v-once指令
- vue组件中为何data必须是一个函数（）
- 用npm发布一个包的教程并编写一个vue的插件发布
- (六)Component初识组件
- Spring|Spring Boot 自动配置的原理、核心注解以及利用自动配置实现了自定义 Starter 组件
- vuex|vuex 基础结构
- Vue源码分析—响应式原理(二)