Prop · JS與WEB前端框架技術

# Prop > 該頁面假設你已經閱讀過了[組件基礎](https://cn.vuejs.org/v2/guide/components.html)。如果你還對組件不太了解，推薦你先閱讀它。 ## [Prop 的大小寫 (camelCase vs kebab-case)](https://cn.vuejs.org/v2/guide/components-props.html#Prop-%E7%9A%84%E5%A4%A7%E5%B0%8F%E5%86%99-camelCase-vs-kebab-case "Prop 的大小寫 (camelCase vs kebab-case)") HTML 中的特性名是大小寫不敏感的，所以瀏覽器會把所有大寫字符解釋為小寫字符。這意味著當你使用 DOM 中的模板時，camelCase (駝峰命名法) 的 prop 名需要使用其等價的 kebab-case (短橫線分隔命名) 命名： ~~~ Vue.component('blog-post', { // 在 JavaScript 中是 camelCase 的 props: ['postTitle'], template: '<h3>{{ postTitle }}</h3>' }) ~~~ ~~~  <blog-post post-title="hello!"></blog-post> ~~~ 重申一次，如果你使用字符串模板，那么這個限制就不存在了。 ## [Prop 類型](https://cn.vuejs.org/v2/guide/components-props.html#Prop-%E7%B1%BB%E5%9E%8B "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 驗證](https://cn.vuejs.org/v2/guide/components-props.html#Prop-%E9%AA%8C%E8%AF%81)。 ## [傳遞靜態或動態 Prop](https://cn.vuejs.org/v2/guide/components-props.html#%E4%BC%A0%E9%80%92%E9%9D%99%E6%80%81%E6%88%96%E5%8A%A8%E6%80%81-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。 ### [傳入一個數字](https://cn.vuejs.org/v2/guide/components-props.html#%E4%BC%A0%E5%85%A5%E4%B8%80%E4%B8%AA%E6%95%B0%E5%AD%97 "傳入一個數字") ~~~   <blog-post v-bind:likes="42"></blog-post>  <blog-post v-bind:likes="post.likes"></blog-post> ~~~ ### [傳入一個布爾值](https://cn.vuejs.org/v2/guide/components-props.html#%E4%BC%A0%E5%85%A5%E4%B8%80%E4%B8%AA%E5%B8%83%E5%B0%94%E5%80%BC "傳入一個布爾值") ~~~  <blog-post is-published></blog-post>   <blog-post v-bind:is-published="false"></blog-post>  <blog-post v-bind:is-published="post.isPublished"></blog-post> ~~~ ### [傳入一個數組](https://cn.vuejs.org/v2/guide/components-props.html#%E4%BC%A0%E5%85%A5%E4%B8%80%E4%B8%AA%E6%95%B0%E7%BB%84 "傳入一個數組") ~~~   <blog-post v-bind:comment-ids="[234, 266, 273]"></blog-post>  <blog-post v-bind:comment-ids="post.commentIds"></blog-post> ~~~ ### [傳入一個對象](https://cn.vuejs.org/v2/guide/components-props.html#%E4%BC%A0%E5%85%A5%E4%B8%80%E4%B8%AA%E5%AF%B9%E8%B1%A1 "傳入一個對象") ~~~   <blog-post v-bind:author="{ name: 'Veronica', company: 'Veridian Dynamics' }" ></blog-post>  <blog-post v-bind:author="post.author"></blog-post> ~~~ ### [傳入一個對象的所有屬性](https://cn.vuejs.org/v2/guide/components-props.html#%E4%BC%A0%E5%85%A5%E4%B8%80%E4%B8%AA%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%89%80%E6%9C%89%E5%B1%9E%E6%80%A7 "傳入一個對象的所有屬性") 如果你想要將一個對象的所有屬性都作為 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> ~~~ ## [單向數據流](https://cn.vuejs.org/v2/guide/components-props.html#%E5%8D%95%E5%90%91%E6%95%B0%E6%8D%AE%E6%B5%81 "單向數據流") 所有的 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 驗證](https://cn.vuejs.org/v2/guide/components-props.html#Prop-%E9%AA%8C%E8%AF%81 "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`函數中是不可用的。 ### [類型檢查](https://cn.vuejs.org/v2/guide/components-props.html#%E7%B1%BB%E5%9E%8B%E6%A3%80%E6%9F%A5 "類型檢查") `type`可以是下列原生構造函數中的一個： * `String` * `Number` * `Boolean` * `Array` * `Object` * `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 的特性](https://cn.vuejs.org/v2/guide/components-props.html#%E9%9D%9E-Prop-%E7%9A%84%E7%89%B9%E6%80%A7 "非 Prop 的特性") 一個非 prop 特性是指傳向一個組件，但是該組件并沒有相應 prop 定義的特性。因為顯式定義的 prop 適用于向一個子組件傳入信息，然而組件庫的作者并不總能預見組件會被用于怎樣的場景。這也是為什么組件可以接受任意的特性，而這些特性會被添加到這個組件的根元素上。例如，想象一下你通過一個 Bootstrap 插件使用了一個第三方的`<bootstrap-date-input>`組件，這個插件需要在其`<input>`上用到一個`data-date-picker`特性。我們可以將這個特性添加到你的組件實例上： ~~~ <bootstrap-date-input data-date-picker="activated"></bootstrap-date-input> ~~~ 然后這個`data-date-picker="activated"`特性就會自動添加到`<bootstrap-date-input>`的根元素上。 ### [替換/合并已有的特性](https://cn.vuejs.org/v2/guide/components-props.html#%E6%9B%BF%E6%8D%A2-%E5%90%88%E5%B9%B6%E5%B7%B2%E6%9C%89%E7%9A%84%E7%89%B9%E6%80%A7 "替換/合并已有的特性") 想象一下`<bootstrap-date-input>`的模板是這樣的： ~~~ <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`。 ### [禁用特性繼承](https://cn.vuejs.org/v2/guide/components-props.html#%E7%A6%81%E7%94%A8%E7%89%B9%E6%80%A7%E7%BB%A7%E6%89%BF "禁用特性繼承") 如果你**不**希望組件的根元素繼承特性，你可以在組件的選項中設置`inheritAttrs: false`。例如： ~~~ Vue.component('my-component', { inheritAttrs: false, // ... }) ~~~ 這尤其適合配合實例的`$attrs`屬性使用，該屬性包含了傳遞給一個組件的特性名和特性值，例如： ~~~ { required: true, placeholder: 'Enter your username' } ~~~ 有了`inheritAttrs: false`和`$attrs`，你就可以手動決定這些特性會被賦予哪個元素。在撰寫[基礎組件](https://cn.vuejs.org/v2/style-guide/#%E5%9F%BA%E7%A1%80%E7%BB%84%E4%BB%B6%E5%90%8D-%E5%BC%BA%E7%83%88%E6%8E%A8%E8%8D%90)的時候是常會用到的： ~~~ 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> ~~~