<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>组件参数校验与非props特性</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<!--String-->
<!--<child content="hello world"></child>-->
<!--Number-->
<!----<child :content="123"></child>-->
<child content="hel"></child>
</div>
<script>
Vue.component('child', {
// props: ['content'],
//组件参数验证
props: {
// content:String
// content:Number
// content:[String,Number]
content: {
type: String,
// required: true,
// default: 'default value',
validator: function (value) {
return (value.length>5)
}
}
},
template: '<div>{{content}}</div>'
})
var vm = new Vue({
el: '#root',
})
</script>
</body>
</html>
网友评论