HTML 中的 attribute 名是大小寫不敏感的，所以瀏覽器會把所有大寫字符解釋為小寫字符。這意味着當你使用 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：
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 驗證。
傳遞靜態或動態 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。
傳入一個數字
<!-- 即便 `42` 是靜態的，我們仍然需要 `v-bind` 來告訴 Vue --> <!-- 這是一個 JavaScript 表達式而不是一個字符串。--> <blog-post v-bind:likes="42"></blog-post> <!-- 用一個變量進行動態賦值。--> <blog-post v-bind:likes="post.likes"></blog-post>傳入一個布爾值
<!-- 包含該 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>傳入一個數組
<!-- 即便數組是靜態的，我們仍然需要 `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>傳入一個對象
<!-- 即便對象是靜態的，我們仍然需要 `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>傳入一個對象的所有屬性
如果你想要將一個對象的所有屬性都作為 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 的情形：
-
這個 prop 用來傳遞一個初始值；這個子組件接下來希望將其作為一個本地的 prop 數據來使用。在這種情況下，最好定義一個本地的 data 屬性並將這個 prop 用作其初始值：
props: ['initialCounter'], data: function () { return { counter: this.initialCounter } } -
這個 prop 以一種原始的值傳入且需要進行轉換。在這種情況下，最好使用這個 prop 的值來定義一個計算屬性：
props: ['size'], computed: { normalizedSize: function () { return this.size.trim().toLowerCase() } }
注意在 JavaScript 中對象和數組是通過引用傳入的，所以對於一個數組或對象類型的 prop 來說，在子組件中改變這個對象或數組本身將會影響到父組件的狀態。