用来接收父组件传给子组件的数据，可以在组件上注册一些自定义特性，当一个值传递给一个prop特性的时候，它就变成那个组件实例的一个属性。
用法：
// 父组件
<child message="this is message"></child>
// 在子组件中定义
Vue.component('child', {
...
props: ['message']
...
})
假设此时的 message 的命名被 myMessage 时，父组件应该写为：
<child my-message="this is message"></child>
因为HTML中的名大小写不敏感，所以浏览器会把所有大写字符解释为小写字符。
传递静态或动态prop
静态传入
// 父组件
<child message="this is message"></child>
// 在子组件中定义
Vue.component('child', {
...
props: ['message']
...
})
动态传入
<!-- 通过v-bind动态赋值 -->
// 父组件
<child v-bind:message="msg"></child>
// 在子组件中定义
Vue.component('child', {
...
props: ['message']
...
})
单项数据流
- 是单向绑定的，当父组件的属性变化时，将传导给子组件，但是不会反过来。
- 每次父组件发生更新时，子组件中所有的Prop都将刷新为最新的值。这意味着你不应该在子组件内部改变Prop，如果你这样做了，Vue会在控制台抛出一个警告。
1、如果子组件需要操作prop中的值，需要将prop中的值赋值给本地定义属性：
props: ['message'],
data: function () {
return {
counter: this.message
}
}
2、这个 prop 以一种原始的值传入且需要进行转换。在这种情况下，最好使用这个 prop 的值来定义一个计算属性：
props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}
prop验证
我们可以为组件的 prop 指定验证要求。如果有一个需求没有被满足，则会出错。
Vue.component('my-component', {
props: {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
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 ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
})
