## 一、概述 父組件通過 Prop 向子組件傳遞數據； ## 二、Prop大小寫 一些基礎知識： 1、HTML 中的 attribute 名是大小寫不敏感的，瀏覽器會把所有大寫字符解釋為小寫字符。 2、字符串模板中`{{ }}`語法中不能是短橫線（name1-name2）分隔命名； 3、你使用 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，這些屬性的名稱和值分別是 prop 各自的名稱和類型； ## 四、靜態和動態賦值 1、靜態 ``` <blog-post title="My journey with Vue"></blog-post> ``` 2、動態 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 都使得其父子 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() } } ``` ## 六、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 的 Attribute 一個非 prop 的 attribute 是指傳向一個組件，但是該組件并沒有相應 prop 定義的 attribute。 因為顯式定義的 prop 適用于向一個子組件傳入信息，然而組件庫的作者并不總能預見組件會被用于怎樣的場景。這也是為什么組件可以接受任意的 attribute，而這些 attribute 會被添加到這個組件的根元素上。 例如，想象一下你通過一個 Bootstrap 插件使用了一個第三方的 `<bootstrap-date-input>` 組件，這個插件需要在其 <input> 上用到一個 data-date-picker attribute。我們可以將這個 attribute 添加到你的組件實例上： ``` <bootstrap-date-input data-date-picker="activated"></bootstrap-date-input> ``` 然后這個`data-date-picker="activated"`attribute 就會自動添加到`<bootstrap-date-input>`的根元素上。