一、Prop的数据流
父子组件的关系：prop向下传递，事件向上传递。父组件通过prop给子组件下发数据，子组件通过事件给父组件发送消息。如图
组件的作用域是孤立的。因此子组件的模板内不能直接饮用父组件的数据，必须通过prop传递到子组件内。
通过v-bind的方式绑定prop把父组件的数据向子组件传递。
但是如上图，prop是单向绑定的：当父组件的属性变化时，将会传递给子组件，但是反过来则不会；目的：防止子组件无意间修改了父组件的状态。
处理的方案：
1.在子组件内定义一个局部变量，并且用prop的值初始化：
props: ['initialCounter'],
data:function(){
return{counter:this.initialCounter }
}
2.定义一个计算属性，处理prop的值并且返回：
props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}
注意：
在JavaScript中对象和数组都是引用类型，指向的同一个内存空间，因此在prop为一个对象或者数组时，在子组件的内部改变它仍然会影响到父组件的状态
二、Prop验证
组件的prop指定验证规则，如传入的数据不符合要求，Vue会发出警告，对于开发他人使用的组件非常有用。
要指定验证规则，需要用对象的形式来定义prop，而不能用字符串数组：
Vue.component('example', {
props: {
// 基础类型检测 (`null` 指允许任何类型)
propA: Number,
// 可能是多种类型
propB: [String, Number],
// 必传且是字符串
propC: { type: String, required: true },
// 数值且有默认值
propD: { type: Number, default: 100 },
// 数组/对象的默认值应当由一个工厂函数返回
propE: {
type: Object,
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
return value > 10 }
}
}
})
