props: properties
组件从 parent 接收到的 props 数据的几种写法:
- 不验证合法性,用数组表示:
props: ['name',
'phoneNumber',
'emailAddress',
'isFavorite'],
- 验证数据类型,使用对象:
props: {
name: String,
phoneNumber: String,
emailAddress: String,
isFavorite: String,
},
- 增加更多验证选项:
props: {
name: {
type: String,
required: true,
},
phoneNumber: {
type: String,
required: true,
},
emailAddress: {
type: String,
required: true,
},
isFavorite: {
type: String,
required: false, // 此 prop 可以不提供
default: "0", // 此 prop 不提供时使用的默认值
validator: function(value) {
// 要求 isFavorite 只能是”1“ 或者”0“
return value==='1' || value==='0';
}
},
当开发大型 app 时,验证 props 合法性十分重要。如果组件接收到的数据不合要求,浏览器 console 将有警告,这样有助于缩短开发调试时间。