本博客記錄了小編在學習Vue過程中的體會與感悟，簡單來說就是小編的學習筆記，學習地址主要爲Vue的官網，官網地址爲：《Vue官方文檔》。相關學習筆記會記錄在我的博客專欄《前端Vue》中，歡迎大家關注~
一、Prop的大小寫
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類型
props: {
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object,
callback: Function,
contactsPromise: Promise // or any other constructor
}
三、傳遞靜態或動態的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的值都是字符串類型的，事實上，任何類型的值都可以傳給prop。
1、傳入一個數字
<!-- 即便 `42` 是靜態的，我們仍然需要 `v-bind` 來告訴 Vue -->
<!-- 這是一個 JavaScript 表達式而不是一個字符串。-->
<blog-post v-bind:likes="42"></blog-post>
<!-- 用一個變量進行動態賦值。-->
<blog-post v-bind:likes="post.likes"></blog-post>
2、傳入一個布爾值
<!-- 包含該 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>
3、傳入一個數組
<!-- 即便數組是靜態的，我們仍然需要 `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>
4、傳入一個對象
<!-- 即便對象是靜態的，我們仍然需要 `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>
5、傳入一個對象的所有屬性
如果想要將一個對象的所有屬性都作爲 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()
}
}
五、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驗證失敗的時候，瀏覽器控制檯會發出一個警告。
1、類型檢查
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 創建的。