https://www.yuque.com/bo939y/ubkqtp/xmyfap
概念：prop 是子組件用來接受父組件傳遞過來的數(shù)據(jù)的一個(gè)自定義屬性荒揣。
父組件的數(shù)據(jù)需要通過 props 把數(shù)據(jù)傳給子組件北专，子組件需要顯式地用 props 選項(xiàng)聲明 "prop"：
<pre class="cm-s-default" style="color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><div id="demo"> <child message="hello world!"></child> </div> <script> // 注冊(cè) Vue.component('child', { // 聲明 props props: ['message'], // 同樣也可以在 vm 實(shí)例中像 "this.message" 這樣使用 template: '<span>{{ message }}</span>' }) // 創(chuàng)建根實(shí)例 new Vue({ el: '#demo' }) </script></pre>
1. Prop 的大小寫 (camelCase vs kebab-case)
HTML 中的 attribute 名是大小寫不敏感的，所以瀏覽器會(huì)把所有大寫字符解釋為小寫字符旧噪。這意味著當(dāng)你使用 DOM 中的模板時(shí)，camelCase (駝峰命名法) 的 prop 名需要使用其等價(jià)的 kebab-case (短橫線分隔命名) 命名：
html：
<pre class="cm-s-default" style="color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><div id="app-1"> <blog-post post-title="hello world"></blog-post> </div></pre>
js：
<pre class="cm-s-default" style="color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">//Prop 的大小寫 (camelCase vs kebab-case) Vue.component('blog-post', { //在 js 中是 camelCase props: ['postTitle'], template: '<h3>{{ postTitle }}</h3>' }); new Vue({ el: '#app-1' })</pre>
重申一次，如果你使用字符串模板潜支，那么這個(gè)限制就不存在了。
2.Prop 類型
到這里柿汛，我們只看到了以字符串?dāng)?shù)組形式列出的 prop：
<pre class="cm-s-default" style="color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">props: ['title', 'likes', 'isPublished', 'commentIds', 'author']</pre>
但是冗酿，通常你希望每個(gè) prop 都有指定的值類型。這時(shí)络断，你可以以對(duì)象形式列出 prop裁替，這些屬性的名稱和值分別是 prop 各自的名稱和類型：
<pre class="cm-s-default" style="color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">props: { title: String, likes: Number, isPublished: Boolean, commentIds: Array, author: Object, callback: Function, contactsPromise: Promise // or any other constructor }</pre>
這不僅為你的組件提供了文檔，還會(huì)在它們遇到錯(cuò)誤的類型時(shí)從瀏覽器的 JavaScript 控制臺(tái)提示用戶貌笨。你會(huì)在這個(gè)頁面接下來的部分看到類型檢查和其它 prop 驗(yàn)證弱判。
3.傳遞靜態(tài)或動(dòng)態(tài) Prop
像這樣，你已經(jīng)知道了可以像這樣給 prop 傳入一個(gè)靜態(tài)的值：
<pre class="cm-s-default" style="color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><blog-post title="My journey with Vue"></blog-post></pre>
你也知道 prop 可以通過 v-bind 動(dòng)態(tài)賦值锥惋，例如：
<pre class="cm-s-default" style="color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"> <blog-post v-bind:title="post.title"></blog-post> <blog-post v-bind:title="post.title + ' by ' + post.author.name" ></blog-post></pre>
在上述兩個(gè)示例中昌腰，我們傳入的值都是字符串類型的，但實(shí)際上任何類型的值都可以傳給一個(gè) prop膀跌。
3.1傳入一個(gè)數(shù)字
<pre class="cm-s-default" style="color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"> <blog-post v-bind:likes="42"></blog-post> <blog-post v-bind:likes="post.likes"></blog-post></pre>
3.2傳入一個(gè)布爾值
<pre class="cm-s-default" style="color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"> <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></pre>
3.3傳入一個(gè)數(shù)組
<pre class="cm-s-default" style="color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"> <blog-post v-bind:comment-ids="[234, 266, 273]"></blog-post> <blog-post v-bind:comment-ids="post.commentIds"></blog-post></pre>
3.4傳入一個(gè)對(duì)象
<pre class="cm-s-default" style="color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"> <blog-post v-bind:author="{ name: 'Veronica', company: 'Veridian Dynamics' }" ></blog-post> <blog-post v-bind:author="post.author"></blog-post></pre>
3.5傳入一個(gè)對(duì)象的所有屬性
如果你想要將一個(gè)對(duì)象的所有屬性都作為 prop 傳入遭商，你可以使用不帶參數(shù)的 v-bind (取代 v-bind:prop-name)。例如捅伤，對(duì)于一個(gè)給定的對(duì)象 post：
<pre class="cm-s-default" style="color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">post: { id: 1, title: 'My Journey with Vue' }</pre>
下面的模板：
<pre class="cm-s-default" style="color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><blog-post v-bind="post"></blog-post></pre>
等價(jià)于：
<pre class="cm-s-default" style="color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><blog-post v-bind:id="post.id" v-bind:title="post.title" ></blog-post></pre>
4.單向數(shù)據(jù)流
所有的 prop 都使得其父子 prop 之間形成了一個(gè)單向下行綁定：父級(jí) prop 的更新會(huì)向下流動(dòng)到子組件中劫流，但是反過來則不行。這樣會(huì)防止從子組件意外改變父級(jí)組件的狀態(tài)丛忆，從而導(dǎo)致你的應(yīng)用的數(shù)據(jù)流向難以理解困介。
額外的，每次父級(jí)組件發(fā)生更新時(shí)蘸际，子組件中所有的 prop 都將會(huì)刷新為最新的值座哩。這意味著你不應(yīng)該在一個(gè)子組件內(nèi)部改變 prop。如果你這樣做了粮彤，Vue 會(huì)在瀏覽器的控制臺(tái)中發(fā)出警告根穷。
這里有兩種常見的試圖改變一個(gè) prop 的情形：
- 這個(gè) prop 用來傳遞一個(gè)初始值；這個(gè)子組件接下來希望將其作為一個(gè)本地的 prop 數(shù)據(jù)來使用导坟。在這種情況下屿良，最好定義一個(gè)本地的 data 屬性并將這個(gè) prop 用作其初始值：
<pre class="cm-s-default" style="color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">props: ['initialCounter'], data: function () { return { counter: this.initialCounter } }</pre>
- 這個(gè) prop 以一種原始的值傳入且需要進(jìn)行轉(zhuǎn)換。在這種情況下惫周，最好使用這個(gè) prop 的值來定義一個(gè)計(jì)算屬性：
<pre class="cm-s-default" style="color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">props: ['size'], computed: { normalizedSize: function () { return this.size.trim().toLowerCase() } }</pre>
注意在 JavaScript 中對(duì)象和數(shù)組是通過引用傳入的尘惧，所以對(duì)于一個(gè)數(shù)組或?qū)ο箢愋偷?prop 來說，在子組件中改變這個(gè)對(duì)象或數(shù)組本身將會(huì)影響到父組件的狀態(tài)递递。
5.Prop 驗(yàn)證
我們可以為組件的 prop 指定驗(yàn)證要求喷橙，例如你知道的這些類型啥么。如果有一個(gè)需求沒有被滿足，則 Vue 會(huì)在瀏覽器控制臺(tái)中警告你贰逾。這在開發(fā)一個(gè)會(huì)被別人用到的組件時(shí)尤其有幫助悬荣。
為了定制 prop 的驗(yàn)證方式，你可以為 props 中的值提供一個(gè)帶有驗(yàn)證需求的對(duì)象疙剑，而不是一個(gè)字符串?dāng)?shù)組氯迂。例如：
<pre class="cm-s-default" style="color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">Vue.component('my-component', { props: { // 基礎(chǔ)的類型檢查 (null 和 undefined 會(huì)通過任何類型驗(yàn)證) propA: Number, // 多個(gè)可能的類型 propB: [String, Number], // 必填的字符串 propC: { type: String, required: true }, // 帶有默認(rèn)值的數(shù)字 propD: { type: Number, default: 100 }, // 帶有默認(rèn)值的對(duì)象 propE: { type: Object, // 對(duì)象或數(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 } } } })</pre>
當(dāng) prop 驗(yàn)證失敗的時(shí)候，(開發(fā)環(huán)境構(gòu)建版本的) Vue 將會(huì)產(chǎn)生一個(gè)控制臺(tái)的警告言缤。
注意那些 prop 會(huì)在一個(gè)組件實(shí)例創(chuàng)建之前進(jìn)行驗(yàn)證嚼蚀，所以實(shí)例的屬性 (如 data、computed 等) 在 default 或 validator 函數(shù)中是不可用的管挟。
5.1類型檢查
type 可以是下列原生構(gòu)造函數(shù)中的一個(gè)：
StringNumberBooleanArrayObjectDateFunctionSymbol
額外的轿曙，type 還可以是一個(gè)自定義的構(gòu)造函數(shù)，并且通過 instanceof 來進(jìn)行檢查確認(rèn)哮独。例如拳芙，給定下列現(xiàn)成的構(gòu)造函數(shù)：
<pre class="cm-s-default" style="color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">function Person (firstName, lastName) { this.firstName = firstName this.lastName = lastName }</pre>
你可以使用：
<pre class="cm-s-default" style="color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">Vue.component('blog-post', { props: { author: Person } })</pre>
來驗(yàn)證 author prop 的值是否是通過 new Person 創(chuàng)建的。
6.非 Prop 的 Attribute
一個(gè)非 prop 的 attribute 是指?jìng)飨蛞粋€(gè)組件皮璧，但是該組件并沒有相應(yīng) prop 定義的 attribute舟扎。
因?yàn)轱@式定義的 prop 適用于向一個(gè)子組件傳入信息，然而組件庫(kù)的作者并不總能預(yù)見組件會(huì)被用于怎樣的場(chǎng)景悴务。這也是為什么組件可以接受任意的 attribute睹限，而這些 attribute 會(huì)被添加到這個(gè)組件的根元素上。
例如讯檐，想象一下你通過一個(gè) Bootstrap 插件使用了一個(gè)第三方的 <bootstrap-date-input> 組件羡疗，這個(gè)插件需要在其 <input> 上用到一個(gè) data-date-picker attribute。我們可以將這個(gè) attribute 添加到你的組件實(shí)例上：
<pre class="cm-s-default" style="color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><bootstrap-date-input data-date-picker="activated"></bootstrap-date-input></pre>
然后這個(gè) data-date-picker="activated" attribute 就會(huì)自動(dòng)添加到 <bootstrap-date-input> 的根元素上别洪。
6.1替換/合并已有的 Attribute
想象一下 <bootstrap-date-input> 的模板是這樣的：
<pre class="cm-s-default" style="color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><input type="date" class="form-control"></pre>
為了給我們的日期選擇器插件定制一個(gè)主題叨恨，我們可能需要像這樣添加一個(gè)特別的類名：
<pre class="cm-s-default" style="color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><bootstrap-date-input data-date-picker="activated" class="date-picker-theme-dark" ></bootstrap-date-input></pre>
在這種情況下，我們定義了兩個(gè)不同的 class 的值：
-
form-control挖垛，這是在組件的模板內(nèi)設(shè)置好的 -
date-picker-theme-dark痒钝，這是從組件的父級(jí)傳入的
對(duì)于絕大多數(shù) attribute 來說，從外部提供給組件的值會(huì)替換掉組件內(nèi)部設(shè)置好的值痢毒。所以如果傳入 type="text" 就會(huì)替換掉 type="date" 并把它破壞送矩！慶幸的是，class 和 style attribute 會(huì)稍微智能一些哪替，即兩邊的值會(huì)被合并起來栋荸，從而得到最終的值：form-control date-picker-theme-dark。
6.2禁用 Attribute 繼承
如果你不希望組件的根元素繼承 attribute，你可以在組件的選項(xiàng)中設(shè)置 inheritAttrs: false晌块。例如：
<pre class="cm-s-default" style="color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">Vue.component('my-component', { inheritAttrs: false, // ... })</pre>
這尤其適合配合實(shí)例的 $attrs 屬性使用爱沟，該屬性包含了傳遞給一個(gè)組件的 attribute 名和 attribute 值，例如：
<pre class="cm-s-default" style="color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">{ required: true, placeholder: 'Enter your username' }</pre>
有了 inheritAttrs: false 和 $attrs摸袁，你就可以手動(dòng)決定這些 attribute 會(huì)被賦予哪個(gè)元素钥顽。在撰寫基礎(chǔ)組件的時(shí)候是常會(huì)用到的：
<pre class="cm-s-default" style="color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">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> })</pre>
注意 inheritAttrs: false 選項(xiàng)不會(huì)影響 style 和 class 的綁定义屏。
這個(gè)模式允許你在使用基礎(chǔ)組件的時(shí)候更像是使用原始的 HTML 元素靠汁，而不會(huì)擔(dān)心哪個(gè)元素是真正的根元素：
<pre class="cm-s-default" style="color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><base-input v-model="username" required placeholder="Enter your username" ></base-input></pre>
