props: {
// 基础类型检测 (`null` 意思是任何类型都可以)
propA: Number,
// 多种类型 (1.0.21+)
propM: [String, Number],
// 必需且是字符串
propB: {
type: String,
required: true
},
// 数字,有默认值
propC: {
type: Number,
default: 100
},
// 对象/数组的默认值应当由一个函数返回
propD: {
type: Object,
default: function () {
return { msg: 'hello' }
}
},
// 指定这个 prop 为双向绑定
// 如果绑定类型不对将抛出一条警告
propE: {
twoWay: true
},
// 自定义验证函数
propF: {
validator: function (value) {
return value > 10
}
},
// 转换函数(1.0.12 新增)
// 在设置值之前转换值
propG: {
coerce: function (val) {
return val + '' // 将值转换为字符串
}
},
propH: {
coerce: function (val) {
return JSON.parse(val) // 将 JSON 字符串转换为对象
}
}
}
})
type 可以是下面原生构造器:
String
Number
Boolean
Function
Object
Array
type 也可以是一个自定义构造器,使用 instanceof 检测。
当 prop 验证失败了,Vue 将拒绝在子组件上设置此值,如果使用的是开发版本会抛出一条警告。
这里也是看的我一脸懵逼,连个栗子都不给,拿刚才的例子改一下打个比方
Vue.component('child', {
// 声明 props,这里驼峰式命名
props: ['myMessage'],
//模板中可以这样用
template: '<span>{{ myMessage+1}}</span>' //改成表达式
})
<!-- kebab-case in HTML -->
<child my-message="hello!"></child> //这里先不改如果我们希望别人把child组件的myMessage当做Number类型来处理,而我们这里又没有做prop验证,结果就是{{ myMessage+1}}会变成字符串拼接,当html传入的是hello!,渲染出来结果:hello!
所以说,告诉别人这里要传入Number类型是必要的,于是改为:
Vue.component('child', {
// 声明 props,这里驼峰式命名
props: {myMessage:Number},
//模板中可以这样用
template: '<span>{{ myMessage+1}}</span>' //改成表达式
})这时候如果传入hello!,此时渲染结果?没错,就是NaN。这样别人就知道要传入一个数字了。
如果这样传入
<child my-message="123"></child> //改成123这样总行了吧,运行,他喵的居然还不行,还是NaN。原文有这样的解释:
//#字面量语法 vs. 动态语法
//初学者常犯的一个错误是使用字面量语法传递数值:
<!-- 传递了一个字符串 "1" -->










