Prop
Prop 是你可以在組件上注冊的一些自定義特性。當(dāng)一個(gè)值傳遞給一個(gè) prop 特性的時(shí)候，它就變成了那個(gè)組件實(shí)例的一個(gè)屬性。
該頁面假設(shè)你已經(jīng)閱讀過了組件基礎(chǔ)。如果你還對組件不太了解，推薦你先閱讀它。
目錄
Prop 的大小寫 (camelCase vs kebab-case)
HTML 中的特性名是大小寫不敏感的，所以瀏覽器會把所有大寫字符解釋為小寫字符。這意味著當(dāng)你使用 DOM 中的模板時(shí)，camelCase (駝峰命名法) 的 prop 名需要使用其等價(jià)的 kebab-case (短橫線分隔命名) 命名：
Vue.component('blog-post', {
// 在 JavaScript 中是 camelCase 的
props: ['postTitle'],
template: '<h3>{{ postTitle }}</h3>'
})<!-- 在 HTML 中是 kebab-case 的 --> <blog-post post-title="hello!"></blog-post>
重申一次，如果你使用字符串模板，那么這個(gè)限制就不存在了。
Prop 類型
到這里，我們只看到了以字符串?dāng)?shù)組形式列出的 prop：
props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
但是，通常你希望每個(gè) prop 都有指定的值類型。這時(shí)，你可以以對象形式列出 prop，這些屬性的名稱和值分別是 prop 各自的名稱和類型：
props: {
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object,
callback: Function,
contactsPromise: Promise // or any other constructor
}這不僅為你的組件提供了文檔，還會在它們遇到錯(cuò)誤的類型時(shí)從瀏覽器的 JavaScript 控制臺提示用戶。你會在這個(gè)頁面接下來的部分看到類型檢查和其它 prop 驗(yàn)證。
傳遞靜態(tài)或動(dòng)態(tài) Prop
像這樣，你已經(jīng)知道了可以像這樣給 prop 傳入一個(gè)靜態(tài)的值：
<blog-post title="My journey with Vue"></blog-post>
你也知道 prop 可以通過 v-bind 動(dòng)態(tài)賦值，例如：
<!-- 動(dòng)態(tài)賦予一個(gè)變量的值 --> <blog-post v-bind:title="post.title"></blog-post> <!-- 動(dòng)態(tài)賦予一個(gè)復(fù)雜表達(dá)式的值 --> <blog-post v-bind:title="post.title + ' by ' + post.author.name" ></blog-post>
在上述兩個(gè)示例中，我們傳入的值都是字符串類型的，但實(shí)際上任何類型的值都可以傳給一個(gè) prop。
傳入一個(gè)數(shù)字
<!-- 即便 `42` 是靜態(tài)的，我們?nèi)匀恍枰?nbsp;`v-bind` 來告訴 Vue --> <!-- 這是一個(gè) JavaScript 表達(dá)式而不是一個(gè)字符串。--> <blog-post v-bind:likes="42"></blog-post> <!-- 用一個(gè)變量進(jìn)行動(dòng)態(tài)賦值。--> <blog-post v-bind:likes="post.likes"></blog-post>
傳入一個(gè)布爾值
<!-- 包含該 prop 沒有值的情況在內(nèi)，都意味著 `true`。--> <blog-post is-published></blog-post> <!-- 即便 `false` 是靜態(tài)的，我們?nèi)匀恍枰?nbsp;`v-bind` 來告訴 Vue --> <!-- 這是一個(gè) JavaScript 表達(dá)式而不是一個(gè)字符串。--> <blog-post v-bind:is-published="false"></blog-post> <!-- 用一個(gè)變量進(jìn)行動(dòng)態(tài)賦值。--> <blog-post v-bind:is-published="post.isPublished"></blog-post>
傳入一個(gè)數(shù)組
<!-- 即便數(shù)組是靜態(tài)的，我們?nèi)匀恍枰?nbsp;`v-bind` 來告訴 Vue --> <!-- 這是一個(gè) JavaScript 表達(dá)式而不是一個(gè)字符串。--> <blog-post v-bind:comment-ids="[234, 266, 273]"></blog-post> <!-- 用一個(gè)變量進(jìn)行動(dòng)態(tài)賦值。--> <blog-post v-bind:comment-ids="post.commentIds"></blog-post>
傳入一個(gè)對象
<!-- 即便對象是靜態(tài)的，我們?nèi)匀恍枰?nbsp;`v-bind` 來告訴 Vue -->
<!-- 這是一個(gè) JavaScript 表達(dá)式而不是一個(gè)字符串。-->
<blog-post
v-bind:author="{
name: 'Veronica',
company: 'Veridian Dynamics'
}"
></blog-post>
<!-- 用一個(gè)變量進(jìn)行動(dòng)態(tài)賦值。-->
<blog-post v-bind:author="post.author"></blog-post>傳入一個(gè)對象的所有屬性
如果你想要將一個(gè)對象的所有屬性都作為 prop 傳入，你可以使用不帶參數(shù)的 v-bind (取代 v-bind:prop-name)。例如，對于一個(gè)給定的對象 post：
post: {
id: 1,
title: 'My Journey with Vue'
}下面的模板：
<blog-post v-bind="post"></blog-post>
等價(jià)于：
<blog-post v-bind:id="post.id" v-bind:title="post.title" ></blog-post>
單向數(shù)據(jù)流
所有的 prop 都使得其父子 prop 之間形成了一個(gè)單向下行綁定：父級 prop 的更新會向下流動(dòng)到子組件中，但是反過來則不行。這樣會防止從子組件意外改變父級組件的狀態(tài)，從而導(dǎo)致你的應(yīng)用的數(shù)據(jù)流向難以理解。
額外的，每次父級組件發(fā)生更新時(shí)，子組件中所有的 prop 都將會刷新為最新的值。這意味著你不應(yīng)該在一個(gè)子組件內(nèi)部改變 prop。如果你這樣做了，Vue 會在瀏覽器的控制臺中發(fā)出警告。
這里有兩種常見的試圖改變一個(gè) prop 的情形：
1. 這個(gè) prop 用來傳遞一個(gè)初始值；這個(gè)子組件接下來希望將其作為一個(gè)本地的 prop 數(shù)據(jù)來使用。在這種情況下，最好定義一個(gè)本地的 data 屬性并將這個(gè) prop 用作其初始值：
props: ['initialCounter'],
data: function () {
return {
counter: this.initialCounter
}
}2. 這個(gè) prop 以一種原始的值傳入且需要進(jìn)行轉(zhuǎn)換。在這種情況下，最好使用這個(gè) prop 的值來定義一個(gè)計(jì)算屬性：
props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}注意在 JavaScript 中對象和數(shù)組是通過引用傳入的，所以對于一個(gè)數(shù)組或?qū)ο箢愋偷?nbsp;prop 來說，在子組件中改變這個(gè)對象或數(shù)組本身將會影響到父組件的狀態(tài)。
Prop 驗(yàn)證
我們可以為組件的 prop 指定驗(yàn)證要求，例如你知道的這些類型。如果有一個(gè)需求沒有被滿足，則 Vue 會在瀏覽器控制臺中警告你。這在開發(fā)一個(gè)會被別人用到的組件時(shí)尤其有幫助。
為了定制 prop 的驗(yàn)證方式，你可以為 props 中的值提供一個(gè)帶有驗(yàn)證需求的對象，而不是一個(gè)字符串?dāng)?shù)組。例如：
Vue.component('my-component', {
props: {
// 基礎(chǔ)的類型檢查 (`null` 和 `undefined` 會通過任何類型驗(yàn)證)
propA: Number,
// 多個(gè)可能的類型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true
},
// 帶有默認(rèn)值的數(shù)字
propD: {
type: Number,
default: 100
},
// 帶有默認(rèn)值的對象
propE: {
type: Object,
// 對象或數(shù)組默認(rèn)值必須從一個(gè)工廠函數(shù)獲取
default: function () {
return { message: 'hello' }
}
},
// 自定義驗(yàn)證函數(shù)
propF: {
validator: function (value) {
// 這個(gè)值必須匹配下列字符串中的一個(gè)
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
})當(dāng) prop 驗(yàn)證失敗的時(shí)候，(開發(fā)環(huán)境構(gòu)建版本的) Vue 將會產(chǎn)生一個(gè)控制臺的警告。
注意那些 prop 會在一個(gè)組件實(shí)例創(chuàng)建之前進(jìn)行驗(yàn)證，所以實(shí)例的屬性 (如
data、computed等) 在default或validator函數(shù)中是不可用的。
類型檢查
type 可以是下列原生構(gòu)造函數(shù)中的一個(gè)：
StringNumberBooleanArrayObjectDateFunctionSymbol
額外的，type 還可以是一個(gè)自定義的構(gòu)造函數(shù)，并且通過 instanceof 來進(jìn)行檢查確認(rèn)。例如，給定下列現(xiàn)成的構(gòu)造函數(shù)：
function Person (firstName, lastName) {
this.firstName = firstName
this.lastName = lastName
}你可以使用：
Vue.component('blog-post', {
props: {
author: Person
}
})來驗(yàn)證 author prop 的值是否是通過 new Person 創(chuàng)建的。
非 Prop 的特性
一個(gè)非 prop 特性是指傳向一個(gè)組件，但是該組件并沒有相應(yīng) prop 定義的特性。
因?yàn)轱@式定義的 prop 適用于向一個(gè)子組件傳入信息，然而組件庫的作者并不總能預(yù)見組件會被用于怎樣的場景。這也是為什么組件可以接受任意的特性，而這些特性會被添加到這個(gè)組件的根元素上。
例如，想象一下你通過一個(gè) Bootstrap 插件使用了一個(gè)第三方的 <bootstrap-date-input> 組件，這個(gè)插件需要在其 <input> 上用到一個(gè) data-date-picker 特性。我們可以將這個(gè)特性添加到你的組件實(shí)例上：
<bootstrap-date-input data-date-picker="activated"></bootstrap-date-input>
然后這個(gè) data-date-picker="activated" 特性就會自動(dòng)添加到 <bootstrap-date-input> 的根元素上。
替換/合并已有的特性
想象一下 <bootstrap-date-input> 的模板是這樣的：
<input type="date" class="form-control">
為了給我們的日期選擇器插件定制一個(gè)主題，我們可能需要像這樣添加一個(gè)特別的類名：
<bootstrap-date-input data-date-picker="activated" class="date-picker-theme-dark" ></bootstrap-date-input>
在這種情況下，我們定義了兩個(gè)不同的 class 的值：
form-control，這是在組件的模板內(nèi)設(shè)置好的date-picker-theme-dark，這是從組件的父級傳入的
對于絕大多數(shù)特性來說，從外部提供給組件的值會替換掉組件內(nèi)部設(shè)置好的值。所以如果傳入 type="text" 就會替換掉 type="date" 并把它破壞！慶幸的是，class 和 style 特性會稍微智能一些，即兩邊的值會被合并起來，從而得到最終的值：form-control date-picker-theme-dark。
禁用特性繼承
如果你不希望組件的根元素繼承特性，你可以在組件的選項(xiàng)中設(shè)置 inheritAttrs: false。例如：
Vue.component('my-component', {
inheritAttrs: false,
// ...
})這尤其適合配合實(shí)例的 $attrs 屬性使用，該屬性包含了傳遞給一個(gè)組件的特性名和特性值，例如：
{
required: true,
placeholder: 'Enter your username'
}有了 inheritAttrs: false 和 $attrs，你就可以手動(dòng)決定這些特性會被賦予哪個(gè)元素。在撰寫基礎(chǔ)組件的時(shí)候是常會用到的：
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選項(xiàng)不會影響style和class的綁定。
這個(gè)模式允許你在使用基礎(chǔ)組件的時(shí)候更像是使用原始的 HTML 元素，而不會擔(dān)心哪個(gè)元素是真正的根元素：
<base-input v-model="username" required placeholder="Enter your username" ></base-input>