1.prop的大小写
HTML中的attribute名称大小写不敏感，所以当使用DOM中的模板时，需要将驼峰命名法的prop名（firstName）改成短横线命名（first-name）：
Vue.component('blog-post', {
// 在 JavaScript 中是 camelCase 的
props: ['postTitle'],
template: '<h3>{{ postTitle }}</h3>'
})<!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-title="hello!"></blog-post>注意：如果使用字符串模板 `...` ，这个限制就不存在了
2.prop类型
若每个prop都有指定的值类型，可以以对象形式列出prop：
props: {
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object,
callback: Function,
contactsPromise: Promise // or any other constructor
}3. 传递静态或动态prop
给prop传值可以是静态的也可以是动态的：
<!--静态的值-->
<blog-post title="My journey with Vue"></blog-post>
<!--动态的值-->
<blog-post v-bind:title="post.title"></blog-post>上边这两个例子，传入的值都是字符串类型，实际上任何类型的值都可以传给prop
（1）传入一个数字
<!-- 即便 `42` 是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post v-bind:likes="42"></blog-post>（2）传入一个布尔值
<!-- 包含该 prop 没有值的情况在内，都意味着 `true`。-->
<blog-post is-published></blog-post>
<!-- 即便 `false` 是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post v-bind:is-published="false"></blog-post>
<!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:is-published="post.isPublished"></blog-post>（3）传入一个数组
<!-- 即便数组是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post v-bind:comment-ids="[234, 266, 273]"></blog-post>
<!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:comment-ids="post.commentIds"></blog-post>（4）传入一个对象
<!-- 即便对象是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post
v-bind:author="{
name: 'Veronica',
company: 'Veridian Dynamics'
}"
></blog-post>
<!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:author="post.author"></blog-post>（5）传入一个对象的所有属性
要将一个对象的所有属性都作为prop传入，可以使用不带参数的v-bind取代v-bind:prop-name：
给定一个对象：post: { id: 1, title: 'My Journey with Vue' }，就可以这样传递：
<blog-post v-bind="post"></blog-post>等价于：
<blog-post
v-bind:id="post.id"
v-bind:title="post.title"
></blog-post>4.单向数据流
所有的prop都使得其父子prop之间形成了一个单向下行绑定：父级prop的更新会向下流动到子组件中，但反过来不行。
每次父组件发生更新时，子组件中的所有prop都将会刷新为最新的值，这意味着你不该在一个子组件内部改变prop的值。
这有两种常见的试图改变prop的情形：
（1）这个prop用来传递一个初始值，这个子组件接下来希望将其作为一个本地的prop来使用
这种情况下，最好定义一个本地的data属性，并将这个prop用作其初始值：
props: ['initialCounter'],
data: function () {
return {
counter: this.initialCounter
}
}（2）这个prop以一种原始的值传入且需要进行转换
这种情况下，最好使用这个prop的值来定义一个计算属性：
props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}5.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
}
}
}
})注意：那些prop会在一个组件实例创建之前进行验证，所以实例的属性
