版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/soulwyb/article/details/86593675
<!DOCTYPE html>
<html>
<head>
<title>组件参数校验与非props特性</title>
<meta charset="utf-8">
<script type="text/javascript" src="vue.js"></script>
<body>
<div id="app">
<!-- 5.props特性与非props特性的区别就是： -->
<!-- props特性是子组件有接收父组件传递过去的数据。并且通过插值直接使用。在前端渲染的页面上是看不到“content='XXXX” -->
<!-- 而非props特性则相反。 非props特性在实际开发中很少用到 -->
<counters :content='"efewefweff"'></counters>
</div>
</body>
<script>
var counter = {
props: {
content: {
// 1类型校验
type: String,
// 2是否必传
required: false,
// 3当没有传的时候的默认值，这个参数是需要required为false的时候才不会报错。
default: "abcdcef",
// 4自定义校验。比如例子中的是判断content传入的数据是否大于5 如果大于返回true 则正常显示 否则返回false 然后报错
validator: function(value) {
return (value.length > 5)
}
}
},
template: "<div>{{content}}</div>"
}
var vm = new Vue({
el: "#app",
components: {
counters: counter
}
})
</script>
</html>