这是我参与8月更文挑战的第16天，活动详情查看：8月更文挑战
组件参数校验
父组件向子组件传递一些内容，子组件有权对接收的内容进行一些约束（即组件接收的参数是有规则可定义的），这些约束就是组件参数校验。
场景需求： 父组件调用子组件的时候，传递过来的这个content必须是一个字符串。
解决方法： 将接收的props定义称对象，并指定类型。
props: {
content: String
},
需求升级： 如果我需要的参数类型是字符串或者数组。
props: {
content: [String, Number]
},
更复杂的参数校验： 子组件通过props接收传递参数，并说明传递的参数有如下属性：
- type —— 参数类型
- required —— 是否必传
- default —— 默认传的值
- validator —— 自定义校验器，要求字符串长度等
props: {
content: {
type: String,
required: true,
default: 'default value',
validator: function(value) {
return (value.length > 5)
}
}
},
非props特性与props特性
props特性（父子组件之间有对应关系）
父组件通过属性(如content)向子组件传值时，而子组件在props中声明了这个属性(如content)的数据。当父子组件关于数据传值的时候，出现了对应的属性(如content)，那么这个属性则为 props特性。
[重点]特点如下：
-
子组件所带的属性传递是不会出现在dom上；
-
父组件通过属性传值后，子组件就会通过 template中的插值表达式 或通过 this.content去取得该属性中的内容
非props特性（使用场景较少）
父组件向子组件传递了一个属性，但是子组件并没有props这块的内容，也就是说子组件并没有声明我要接收父组件的传递过来的内容。
<div id="root">
<child content="123" ></child>
</div>
var child = {
template: '<div>{{content}}</div>'
}
这样会报错：显示父组件的属性content未被定义
将子组件中的引用去掉后，可以看到该content属性(即非props特性)则会展现在子组件template中的页面模板的dom标签的属性中。
<div id="root">
<child content="123" ></child>
</div>
var child = {
template: '<div>子组件的内容</div>'
}
非props特点
-
若子组件未定义props进行接收父组件属性传来的值，那么这个属性（如content）则为非props特性。
-
父组件如果使用一个非props特性，子组件没有通过peopes接收属性数据，但该属性则会展现在子组件template中的页面模板的dom标签的属性中。
