父组件可以向子组件传值，但是相应的，子组件可以对从父组件传过来的值进行约束，这就是组件参数校验。
举一个需求，假设父组件传给子组件的值，子组件要求是字符串，而不能是其他的形式。
下面是还没有给约束的代码：
<body>
<div id="root">
<child content="hello world"></child>
</div>
<script>
Vue.component('child',{
props: ['content'],
template:'<div>{{content}}</div>'
})
var vm = new Vue({
el:'#root'
})
</script>
</body>
给约束后，props的书写形式会发生变化，将不是以数组的格式来写，是以大括号的形式来表达：
<body>
<div id="root">
<child content="hello world"></child>
</div>
<script>
Vue.component('child',{
props: {
content:String
},
template:'<div>{{content}}</div>'
})
var vm = new Vue({
el:'#root'
})
</script>
</body>
将props的内容约定为字符串，那么当父组件的值不是字符串的时候，浏览器将会报错。
比如将
<div id="root">
<child content="hello world"></child>
</div>
写成
<div id="root">
<child :content="hello world"></child>
</div>
这样也就是在content前加一个冒号，也就是绑定属性的意思。这样写的话，那么等号右边的双引号就不是代表字符串的意思，而是Vue表达式的意思。
再举一个例子：
<body>
<div id="root">
<child :content="123"></child>
</div>
<script>
Vue.component('child',{
props: {
content:String
},
template:'<div>{{content}}</div>'
})
var vm = new Vue({
el:'#root'
})
</script>
</body>
这样的话，浏览器虽然可以显示内容，但是打开控制台后，可以看到了报错。因为:content="123"这个表示的不是字符串，但是子组件要求的是字符串，所以结果会报错。
当然，需求并不总是一个约束条件，如果有两个或两个以上，这个怎么处理。
比如：上面的约束条件变为，既可以是字符串也可以是数字。
那么只需将props改变一下即可：
<body>
<div id="root">
<child :content="123"></child>
</div>
<script>
Vue.component('child',{
props: {
content:[Number,String]
},
template:'<div>{{content}}</div>'
})
var vm = new Vue({
el:'#root'
})
</script>
</body>
即props跟一个数组，数据内包含所约束的内容。这样写的话，无论父组件传来的是Number还是String，都将不会有任何问题
props不仅仅可以跟一个数组的形式，还可以跟一个对象。
比如下面例子：
<body>
<div id="root">
<child content="hello world"></child>
</div>
<script>
Vue.component('child',{
props: {
content:{
type:String
}
},
template:'<div>{{content}}</div>'
})
var vm = new Vue({
el:'#root'
})
</script>
</body>
这个例子中的pros用对象的形式限制了父组件传给子组件的值必须是一个字符串。
当然限制条件可以有很多。比如以下：
<body>
<div id="root">
<child content="hello world"></child>
</div>
<script>
Vue.component('child',{
props: {
content:{
type:String,
required:false,
default:'default value',
validator:function(value){
return(value.length >5)
}
}
},
template:'<div>{{content}}</div>'
})
var vm = new Vue({
el:'#root'
})
</script>
</body>
来一一解释一下，
required:false，这句是父组件是否一定需要传值给子组件，当为false时，则不需要；当为true时，则父组件一定要传值给子组件，否则会报错。
default：'default value',这句是默认的。在父组件没有给子组件通过属性传值的时候（当然前提得是required:false，这样才不会报错），如果有这句，那么页面上显示的将是default value；当然，如果页面上父组件有给子组件传的值（比如页面上的content=“hello world”），那么这句'default value'将不会显示出来。
最后一个validator是自定义限制条件：来解释下这个例子，这个得结合上面的type:String来综合说明，String表明内容必须是个字符串；function括号中的value是父组件传入的内容，返回的是这个内容的长度必须要大于5。
非props特性（用的不是很多）
说道非props特性，先得说说props特性：1、父组件要通过属性的形式来传值；2、子组件要通过props的形式来接收；3、然后可以在子组件中直接用父组件传过来的数据；4、同时props属性不会显示在DOM的标签中
非props特性：1、父组件传值，但是子组件不接收（即没有props），这样子组件就没法使用父组件传递过来的内容；2
同时非props属性中，父组件的传值属性会显示在子组件最外层标签的HTML属性中，这个可以通过下面的例子来解释下：
<body>
<div id="root">
<child content="hello world"></child>
</div>
<script>
Vue.component('child',{
// props: {
// content:{
// type:String,
// required:false,
// default:'default value',
// validator:function(value){
// return(value.length >5)
// }
// }
// },
template:'<div>hello</div>'
})
var vm = new Vue({
el:'#root'
})
</script>
</body>
这个例子中，最后页面显示出来的是：
图片.png
可以看到，父组件中的属性会在子组件中的标签显示出来。
网友评论