使用 Prop 可以向子组件传递数据。

Prop

这是一个可以在组件注册时自定义的特性。当一个值传递给一个组件的 prop 特性（Attribute）时，就变成了这个组件的属性（Property）。

一个组件默认可以拥有任意数量的 Prop，任何值都可以传递给 Prop。然后再组件实例当中，可以通过 Prop 列表访问这个值，就像访问 data 中的值。

🌰 例子：

Vue.component('blog-post', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>'
})

<div id="blog-post-demo" class="demo">
  <blog-post title="My journey with Vue"></blog-post>
  <blog-post title="Blogging with Vue"></blog-post>
  <blog-post title="Why Vue is so fun"></blog-post>
</div>

Prop 的大小写

由于 HTML 中的 特性 Attribute 命名方式 大小写不敏感，浏览器会讲所有大写的字符解释为小写字符。

规范：Prop 名如果为 camelCase 驼峰命名法，在模版中需要使用其等价的 kebab-case 短横线分隔命名。

🌰 例子：

Vue.component('blog-post', {
  // 在 JavaScript 中是 camelCase 的
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})

<blog-post post-title="hello!"></blog-post>

Prop 的类型

当没有指定 Prop 的类型时，可以简化 Prop 的列表写为 字符串列表：

props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

如果希望每个 prop 都有指定的值类型。可以以对象的形式列出 prop。property 的名称和值分别是 prop 各自的名称和类型。当传送的 Prop 类型不相符合时，浏览器的控制台会报错。

🌰 例子：

props: {
  title: String,
	likes: Numebr,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function,
  contactsPromise: Promise // or any other constructor
}

传入静态或者动态 Prop

通常可以传送给 prop 静态的值：

<blog-post title="My journey with Vue"></blog-post>

此时组件中接收到的是一个普通的字符串。

要动态传送不同类型的值，需要使用到 v-bind ，传入一个 JavaScript 表达式。更多的类型参照 Prop — Vue.js (vuejs.org) (opens new window)。

🌰 例子：

<blog-post :title="post.title"></blog-post>

或者拼接：

<blog-post :title="post.title + ' by ' + post.author.name"
></blog-post>

Prop 是单向数据流

利用 Prop 可以实现 父组件传送数据到子组件。但是不可以反过来，这样防止子组件意外变更父组件的状态，导致应用的数据流向不明。因为，每当父组件发生变更，子组件的所有 prop 都会刷新为最新的值，如果子组件内部改变 prop 的值。

注意，JavaScript 对象和数组是通过引用传入的，所以对于一个数组或者对象的 prop 来说，子组件中更改变更这个对象可能会影响到父组件 ⚠️。

常见的可能会修改 Prop 的情况：

• 父组件传送 初始值 给子组件使用，子组件希望这个初始值能够作为一个变量数据修改。此时可以将这个初始值定义到 data property（定义一个新的 data 变量）。

• 子组件接收到来自父组件的原始数据，子组件需要对这个原始数据转换。最好使用这个数据定义一个计算属性。

Prop 的类型验证

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

• String
• Number
• Boolean
• Array
• Object
• Date
• Function
• Symbol

type 可以是一个自定义构造 has 农户，并且通过 insanceof 检查确认这个类型。

🌰 例子：

function Person (firstName, lastName) {
  this.firstName = firstName
  this.lastName = lastName
}

Vue.component('blog-post', {
  props: {
    author: Person
  }
})