Vue.component('my-component',{
props:{
//必须是数字类型
propA:Number,
//必须是字符串或数字类型
propB:[String,Number],
//布尔值，如果没有定义，默认值就是true
propC:{
type:Boolean,
default:true
},
//数字，而且是必传
propD:{
type:Number,
required:true
},
//如果是数组或对象，默认值必须是一个函数来返回
propE:{
type:Array,
default:function (){
return [];
}
},
//自定义一个验证函数
propF:{
validator:function (value){
return value>10;
}
}
}
})
验证的type类型可以是：
String
Number
Boolean
Object
Array
Function
type也可以是一个自定义构造器，使用instanceof检测。
当props验证失败时，在开发版本下会在控制台抛出一条警告。
自定义构造器测试：
<body>
<div id="app">
{{myObj}}
<my-component :my-obj="12"></my-component>
<my-component :my-obj="myObj"></my-component>
</div>
<script>
function MyObj(){
this.name=1;
this.age=2;
}
var myObj=new MyObj();
console.log(new MyObj());
Vue.component('my-component',{
props:{
//自定义构造器测试
myObj:MyObj,
},
template:'<div>自定义构造器测试 ——{{myObj}}</div>'
})
new Vue({
el:'#app',
data:{
myObj:myObj
}
})
</script>
</body>
显示如下：
传入12时报错
http://www.cnblogs.com/exhuasted/p/7250452.html