共计 687 个字符,预计需要花费 2 分钟才能阅读完成。
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: () => {} | |
} |
正文完