手把手教你VUE从入门到放弃—— 篇十五（组件参数校验与非props特性）
参数校验
示例如下，这里我们给number添加的数据类型约束为字符串型，这里我们用111数字型，明显违反了约束，导致控制台出现警告,如第二张图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件参数校验与非props特性</title>
<script src="vue.js"></script>
</head>
<body>
<div id = 'app2'>
<row :number="111"></row>
</div>
<script>
Vue.component('row',{
props:{
number:String
},
template:'<h2>{{number}}</h2>'
});
var app = new Vue({
el:'#app2'
});
</script>
</body>
</html>
我们还可以使用如下约束方式，使用对象或者validator
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件参数校验与非props特性</title>
<script src="vue.js"></script>
</head>
<body>
<div id = 'app2'>
<row number="asdasfa"></row>
</div>
<script>
Vue.component('row',{
props:{
number:{
type:[String,Number],
required:false,
default:'mmme',
validator:function(value){
return value.length -5 >=0
}
}
},
template:'<h2>{{number}}</h2>'
});
var app = new Vue({
el:'#app2'
});
</script>
</body>
</html>
非props特性
也就是父组件使用的属性，不在子组件中的props中定义，也就不能在子组件中使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件参数校验与非props特性</title>
<script src="vue.js"></script>
</head>
<body>
<div id = 'app2'>
<row number="asdasfa"></row>
</div>
<script>
Vue.component('row',{
props:{
/* number:{
type:[String,Number],
required:false,
default:'mmme',
validator:function(value){
return value.length -5 >=0
}
} */
},
template:'<h2>{{number}}</h2>'
});
var app = new Vue({
el:'#app2'
});
</script>
</body>
</html>