Vue 组件（二）父组件与子组件传递数据 之props
根据Vue.js官方文档：组件实例的作用域是孤立的，也就是说组件与组件之间即使与同名属性，值也不共享。这意味着不能再子组件的模板内直接引用父组件的数据。父组件的数据需要通过props才能下发到子组件中。
什么是父组件什么是子组件？如果组件A在它的模板中使用了组件B，那么组件A就是组件B的父组件，组件B就是A组件的子组件。
Vue.component('my-button', {
tempalte: '<button>一个按钮</button>'
})
var app3 = new Vue({
el: '#app3',
data: {
message: 0
}
})
<div id="app3"> <mybutton></mybutton> </div>
<div id=”app3”></div> 是父组件
<button>一个按钮</button> 是子组件
如果app3要传数据给button，需要给在子组件button中用prop显式地声明它期待的数据。
js
Vue.component('my-button', {
props: ['deliver'],
tempalte: '<button>{{deliver}}</button>'
})
var app3 = new Vue({
el: '#app3',
data: {
message: '把我传给子组件'
}
})
HTML
<div id="app3"> <my-button v-bind:deliver="message"></my-button> </div>
上面代码中，我们用v-bind动态地将prop绑定到父组件的数据，因此每当父组件数据变化时，该变化也会传递给子组件。
#单向数据流
Prop是单向绑定的，也就是说不能在子组件中改变prop。那么如果在子组件中想要修改prop的数据：
1、 prop作为初始值传入后，子组件想把他作为局部数据来使用
2、 prop作为初始值传入，由子组件处理成其他数据输出
对于上面的两种情况采用的方式是：
1、 定义一个局部变量，并用prop的值初始化它
props: ['initialCounter'], data: function () { return { counter: this.initialCounter } }
2、定义一个计算属性，处理prop的值并返回
props: ['size'], computed: { normalizedSize: function () { return this.size.trim().toLowerCase() } }
#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
}
}
}
})
