组件参数校验与非props特性
2018-07-12 本文已影响8人
程序员同行者
<!DOCTYPE html>
<html>
<head>
<title>组件参数校验与非props特性</title>
<script src="./vue.js"></script>
</head>
<body>
<div id='app'>
<child content="hello"></child>
</div>
<script>
// props特性 要求父组件传 子组件接收，然后可以在子组件里用父组件传过来的数据，同时props属性不会显示在dom的标签之中。
// 非props特性，父组件传，但值组件不接收，name在子组件中就没法去使用父组件传递过来的数据，同时非props属性会显示在子组件的最外层的标签的html属性之中。
Vue.component('child',{
props: {
// content: String
// content: Number
// content: [Number,String]
content: {
type: String, // 字符串
required: true, // 必填
default: 'default', // 默认值
validator: function(value) {
return (value.length >5) //传入的字符串长度必须大于5
}
}
},
template: '<div>{{content}}</div>'
})
var vm = new Vue({
el:'#app',
})
</script>
</body>
</html>
