支柱
該頁面假設你已經閱讀過了元件基礎。如果你還對組件不太了解，推薦你先閱讀它。
目錄
#Prop 的大小寫(camelCase vs kebab-case)
HTML 中的特性名稱是大小寫不敏感的，所以瀏覽器會把所有大寫字元解釋為小寫字元。這表示當你使用DOM 中的模板時，camelCase (駝峰命名法) 的prop 名需要使用其等價的kebab-case (短橫線分隔命名) 命名：
Vue.component('blog-post', {
// 在 JavaScript 中是 camelCase 的
props: ['postTitle'],
template: '<h3>{{ postTitle }}</h3>'
})<!-- 在 HTML 中是 kebab-case 的 --> <blog-post post-title="hello!"></blog-post>重申一次，如果你使用字串模板，那麼這個限制就不存在了。
Prop 類型
#到這裡，我們只看到了以字串陣列形式列出的prop：
props: ['title', 'likes', 'isPublished', 'commentIds', 'author']但是，通常你希望每個prop 都有指定的值類型。這時，你可以以物件形式列出prop，這些屬性的名稱和值分別是prop 各自的名稱和類型：
props: {
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object,
callback: Function,
contactsPromise: Promise // or any other constructor
}這不僅為你的元件提供了文檔，還會在它們遇到錯誤的類型時從瀏覽器的JavaScript 控制台提示使用者。你會在這個頁面接下來的部分看到類型檢查和其它 prop 驗證。
傳遞靜態或動態Prop
#像這樣，你已經知道可以像這樣給prop 傳入一個靜態的值：
<blog-post title="My journey with Vue"></blog-post>
你也知道prop 可以透過v-bind 動態賦值，例如：
<!-- 动态赋予一个变量的值 --> <blog-post v-bind:title="post.title"></blog-post> <!-- 动态赋予一个复杂表达式的值 --> <blog-post v-bind:title="post.title + ' by ' + post.author.name" ></blog-post>
在上述兩個範例中，我們傳入的值都是字串型的，但實際上任何類型的值都可以傳給一個prop。
傳入一個數字
#<!-- 即便 `42` 是静态的，我们仍然需要 `v-bind` 来告诉 Vue --> <!-- 这是一个 JavaScript 表达式而不是一个字符串。--> <blog-post v-bind:likes="42"></blog-post> <!-- 用一个变量进行动态赋值。--> <blog-post v-bind:likes="post.likes"></blog-post>
##傳入一個布林值
<!-- 包含该 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>
#傳入一個陣列
<!-- 即便数组是静态的，我们仍然需要 `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>
傳入一個物件#
<!-- 即便对象是静态的，我们仍然需要 `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>傳入一個物件的所有屬性
如果你想要將一個物件的所有屬性都當作prop 傳入，你可以使用不含參數的v-bind (取代v-bind:prop-name)。例如，對於一個給定的物件post：
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>
單向資料流
所有的prop 都使得其父子prop 之間形成了一個
單向下行綁定：父級prop 的更新會向下流向子元件中，但反過來則不行。這樣會防止從子元件意外改變父級元件的狀態，從而導致你的應用的資料流向難以理解。
額外的，每次父級元件發生更新時，子元件中所有的 prop 都會刷新為最新的值。這表示你不應該在一個子元件內部改變 prop。如果你這樣做了，Vue 會在瀏覽器的控制台中發出警告。
這裡有兩種常見的試圖改變一個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()
}
}注意在 JavaScript 中物件和陣列是透過引用傳入的，所以對於一個數組或物件類型的 prop 來說，在子元件中改變這個物件或陣列本身將會影響到父元件的狀態。
#
Prop 驗證
我們可以為元件的 prop 指定驗證要求，例如你知道的這些型別。如果有需求沒有被滿足，則 Vue 會在瀏覽器控制台中警告你。這在開發一個會被別人用到的元件時尤其有幫助。
為了自訂 prop 的驗證方式，你可以為 props 中的值提供一個帶有驗證需求的對象，而不是一個字串陣列。例如：
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 驗證失敗的時候，(開發環境建置版本的) Vue 將會產生一個控制台的警告。
注意那些 prop 會在一個元件實例建立之前進行驗證，所以實例的屬性 (如
data、computed等) 在default或validator函數中是無法使用的。
型別檢查
type 可以是下列原生建構子中的一個：
StringNumberBooleanArrayObjectObject
Date
#Function
Symbol
額外的，type
instanceof
來進行檢查確認。例如，給定下列現成的建構子：
function Person (firstName, lastName) {
this.firstName = firstName
this.lastName = lastName
}你可以使用：Vue.component('blog-post', {
props: {
author: Person
}
})來驗證author prop 的值是否是透過
new Person創建的。
非Prop 的特性
因為明確定義的 prop 適用於向一個子元件傳入訊息，然而元件庫的作者並不總是能預見元件會被用於怎樣的場景。這也是為什麼元件可以接受任意的特性，而這些特性會被加入到這個元件的根元素上。 例如，想像你透過一個Bootstrap 外掛程式使用了一個第三方的<bootstrap-date-input>
<input>
上用到一個
特性。我們可以將這個特性加入到你的元件實例上：<bootstrap-date-input data-date-picker="activated"></bootstrap-date-input>
然後這個data-date-picker="activated" 特性就會自動加入到
的根元素上。
<input type="date" class="form-control">
為了給我們的日期選擇器外掛程式自訂一個主題，我們可能需要像這樣添加一個特別的類別名稱：
<bootstrap-date-input data-date-picker="activated" class="date-picker-theme-dark" ></bootstrap-date-input>
在這種情況下，我們定義了兩個不同的class 的值：
form-control，這是在元件的模板內設定好的date-picker-theme-dark，這是從元件的父級傳入的
對於絕大多數特性來說，從外部提供給組件的值會取代掉組件內部設定好的值。所以如果傳入 type="text" 就會替換掉 type="date" 並且破壞它！慶幸的是，class 和style 特性會稍微智慧一些，即兩邊的值會被合併起來，從而得到最終的值：form-control date-picker- theme-dark。
停用特性繼承
#如果你不希望元件的根元素繼承特性，你可以在元件的選項中設定inheritAttrs: false。例如：
Vue.component('my-component', {
inheritAttrs: false,
// ...
})這尤其適合配合實例的$attrs 屬性使用，該屬性包含了傳遞給一個元件的特性名稱和特性值，例如：
{
required: true,
placeholder: 'Enter your username'
}有了inheritAttrs: false 和$attrs，你就可以手動決定這些特性會被賦予哪個元素。在寫基礎元件的時候是常用的：
Vue.component('base-input', {
inheritAttrs: false,
props: ['label', 'value'],
template: `
<label>
{{ label }}
<input
v-bind="$attrs"
v-bind:value="value"
v-on:input="$emit('input', $event.target.value)"
>
</label>
`
})註：
inheritAttrs: false選項#不會影響style和class的綁定。
這個模式允許你在使用基礎元件的時候更像是使用原始的HTML 元素，而不會擔心哪個元素是真正的根元素：
<base-input v-model="username" required placeholder="Enter your username" ></base-input>
