## 一：Prop大小寫
```
Vue.component('blog-post', {
// 在 JavaScript 中是 camelCase 的
props: ['postTitle'],
template: '<h3>{{ postTitle }}</h3>'
})
```
注冊組件時props是postTitle，但在組件中使用時是post-title
```
<!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-title="hello!"></blog-post>
```
## 二：Prop的類型
1.數組
```
props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
```
2.對象
>[info] 當props使用對象的形式時可以使用類型檢查，這也是推薦使用的方式
```
props: {
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object,
callback: Function,
contactsPromise: Promise // or any other constructor
}
```
## 三：單向數據流
所有的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()
}
}
```
>[danger] 注意在 JavaScript 中對象和數組是通過引用傳入的，所以對于一個數組或對象類型的 prop 來說，在子組件中改變這個對象或數組本身**將會**影響到父組件的狀態。
## 四：非Prop的特征
**非 prop 特性是指傳向一個組件，但是該組件并沒有定義相對應的prop。**
```
Vue.component('bootstrap-date-input',{
template:`<input type="date" class="form-control">`
})
//組件并沒有定義data-date-picker的porp,此時會把data-date-picker添加到組件的根元素中
<bootstrap-date-input data-date-picker="activated"></bootstrap-date-input>
```
```
<input type="date" data-date-picker="activated" class="form-control">
```
**默認會把特征繼承作用于組件根元素，但往往我們需要靈活設置作用的元素。**
1.禁用特征繼承
禁用根組件的特征繼承需要在組件的選項中設置`inheritAttrs: false`,這樣就不會默認作用于跟組件
```
Vue.component('bootstrap-date-input',{
inheritAttrs: false,
template:`<label>
{{ label }}
<input
v-bind="$attrs"
v-bind:value="value"
v-on:input="$emit('input', $event.target.value)"
>
</label>`
})
```
2.設置特征繼承作用的元素
在需要設置的元素上使用`$attrs`屬性即可作用到設置的元素中。
```
Vue.component('base-input', {
inheritAttrs: false,
props: ['label', 'value'],
template: `
<label>
{{ label }}
<input
v-bind="$attrs" //設置$attrs,則特征會作用于input元素
v-bind:value="value"
v-on:input="$emit('input', $event.target.value)"
>
</label>
`
})
```
>[danger] 注意`inheritAttrs: false`選項**不會**影響`style`和`class`的綁定。
這個模式允許你在使用基礎組件的時候更像是使用原始的 HTML 元素，而不會擔心哪個元素是真正的根元素：
~~~
<base-input
v-model="username"
required
placeholder="Enter your username"
></base-input>
~~~
