1.Prop类型

目前有以字符串数组形式列出的prop：

props：['title', 'likes', 'isPublished', 'commentIds', 'author'] 但是通常希望每个prop都有指定的值类型，这时可以以对象形式列出prop，这些property的名称和值分别是prop各自的名称和类型：

  props: {
    title: String,
    likes: Number,
    isPublished: Boolean,
    commentIds: Array,
    author: Objec,
    callback: Function,
    contactsPromise: Promise //或任何其他构造函数
  }

这不仅为组件提供了文档，还会在它们遇到错误的类型时从浏览器的JavaScript控制台提示用户，接下来的时类型检查和其他prop验证。

2.传递静态或动态的Prop

可以像这样给prop传入一个静态的值： <blog-post title="My journey with Vue></blog-post>，也可以通过v-bind或简写:动态赋值：

动态赋予一个变量的值：<blog-post :title="post.title">
动态赋予一个复杂表达式的值：<blog-post :title="post.title + 'by' + post.author.name"> 上面示例中我们传入的值都是字符串类型的，但实际上任何类型的值都可以传给一个prop。

2.1传入一个数字

即便‘42’是静态的，我们仍然需要‘v-bind’来告诉Vue这是一个JavaScript表达式而不是一个字符串：<blog-post :likes="42">
用一个变量进行动态赋值：<blog-post :likes="post.likes">

2.2传入一个布尔值

如果该prop没有值的情况在内，都意味着‘true’，如果没有在props中把is-published的类型设置为Boolean，则这里的值为空字符串，而不是“true”：<blog-post is-published>
即使‘false’是静态的，我们仍然需要‘v-bind’来告诉Vue，这是一个JavaScript表达式而不是一个字符串：<blog-post :is-published="false">
用一个变量进行动态赋值：<blog-post :is-published="post.isPublished">

2.3传入一个数组

即便数组是静态的，我们仍然需要‘v-bind’来告诉Vue，这是一个JavaScript表达式而不是一个字符串：<blog-post :comment-ids="[234, 266, 273]">
用一个变量进行动态赋值：<blog-post :comment-ids="post.commentIds">

2.4传入一个对象

即便对象是静态的，我们仍然需要‘v-bind’来告诉Vue，这是一个JavaScript表达式而不是一个字符串：<blog-post :author="{name: 'Veronica', company: 'Veridian Dynamics'}">
用一个变量进行动态赋值：<blog-post :author="post.author">

2.5传入一个对象的所有property

如果想要将一个对象的所有property都作为prop传入，可以使用不带参数的v-bind取代v-bind:prop-name。例如，给定一个对象post：

post: {id: 1, title: 'My journey with Vue'} 则模板为：
<blog-post v-bind="post"> 等价于：
<blog-post v-bind:id="post.id" v-bind:title="post.title">

3.单向数据流

所有的prop都使得其父子prop之间形成了一个单向下行绑定：父级prop的更新会向下流动到子组件中，但是反过来不行。这样可以防止子组件意外变更父组件的状态，从而导致应用的数据流向难以理解。另外每次父级组件发生变更时，子组件中所有的prop都将会刷新为最新的值。这意味着不应该在一个子组件内部改变prop，如果这样做Vue会在浏览器的控制台发出警告。有两种常见的试图变更一个prop的情形：

1.这个prop用来传递一个初始值：这个子组件接下来希望将其作为一个本地的prop数据来使用。在这种情况下，最好定义一个本地的data property并将这个prop作为其初始值：

props: ['initialCounter'],
data() {
  return {
    counter: this.initialCounter
  }
}

2.这个prop以一种原始的值传入且需要进行转换。在这种情况下，最好使用这个prop的值来定义一个计算属性：

props: ['size'],
computed: {
  normalizedSize () {
    return this.size.trim().toLowerCase()
  }
}

注意在JavaScript中对象和数组是通过引用传入的，所以对于一个数组或对象类型的prop来说，在子组件中改变变更这个对象或数组本身将会影响到父组件的状态。

4.Prop验证

我们可以为组件的prop指定验证要求，例如知道的这些类型。如果有一个需求没有被满足，则Vue会在浏览器控制台中警告。这在开发一个会被别人用到的组件时尤其有帮助。为了定制prop的验证方式，可以为props中的值提供一个带有验证需求的对象，而不是一个字符串数组。

基础的类型检查、多个可能的类型、必填的字符串、带有默认值的数字、带有默认值的对象、自定义验证函数、具有默认值的函数当prop验证失败的时候，（开发环境构建版本的）Vue将会产生一个控制台的警告。注意那些prop会在一个组件实例创建之前进行验证，所以实例的property（例如data、computed等）在default或validator函数中是不可用的。

4.1类型检查

type可以是下列原生构造函数中的一个：

String、Number、Boolean、Array、Object、Date、Funtion、Symbol 此外，type还可以是一个自定义的构造函数，并且通过instanceof来进行检查确认。例如给定下列现成的构造函数：
function Person(firstName, lastName) {this.firstName=firstName, this.lastName=lastName} 可以使用：
app.component('blog-post', { props: { author: Person } }) 用于验证author prop的值是否是通过new Person创建的。

4.2Prop的大小写命名（camelCase vs kebab-case）

HTML中的attribute名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当使用DOM中的模板时，camelCase（驼峰命名法）的prop名需要使用其等价的kebab-case（短横线分隔命名）命名。另外，如果使用字符串模板，那么这个限制就不存在。

Props