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