Prop 的大小寫 (camelCase vs kebab-case)

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>

重申一次，如果你使用字符串模板，那么這個限制就不存在了。

靜態(tài)的和動態(tài)的 Prop

像這樣，你已經(jīng)知道了可以像這樣給 prop 傳入一個靜態(tài)的值：

<blog-post title="My journey with Vue"></blog-post>

你也知道 prop 可以通過 v-bind 動態(tài)賦值，例如：

<blog-post v-bind:title="post.title"></blog-post>

在上述兩個示例中，我們傳入的值都是字符串類型的，但實際上任何類型的值都可以傳給一個 prop。

傳入一個數(shù)字

<!-- 即便 `42` 是靜態(tài)的，我們?nèi)匀恍枰?`v-bind` 來告訴 Vue --><!-- 這是一個 JavaScript 表達式而不是一個字符串。--><blog-post v-bind:likes="42"></blog-post><!-- 用一個變量進行動態(tài)賦值。--><blog-post v-bind:likes="post.likes"></blog-post>

傳入一個布爾值

<!-- 包含該 prop 沒有值的情況在內(nèi)，都意味著 `true`。--><blog-post favorited></blog-post><!-- 即便 `false` 是靜態(tài)的，我們?nèi)匀恍枰?`v-bind` 來告訴 Vue --><!-- 這是一個 JavaScript 表達式而不是一個字符串。--><base-input v-bind:favorited="false"><!-- 用一個變量進行動態(tài)賦值。--><base-input v-bind:favorited="post.currentUserFavorited">

傳入一個數(shù)組

<!-- 即便數(shù)組是靜態(tài)的，我們?nèi)匀恍枰?`v-bind` 來告訴 Vue --><!-- 這是一個 JavaScript 表達式而不是一個字符串。--><blog-post v-bind:comment-ids="[234, 266, 273]"></blog-post><!-- 用一個變量進行動態(tài)賦值。--><blog-post v-bind:comment-ids="post.commentIds"></blog-post>

傳入一個對象

<!-- 即便對象是靜態(tài)的，我們?nèi)匀恍枰?`v-bind` 來告訴 Vue --><!-- 這是一個 JavaScript 表達式而不是一個字符串。--><blog-post v-bind:comments="{ id: 1, title: 'My Journey with Vue' }"></blog-post>

<!-- 用一個變量進行動態(tài)賦值。--><blog-post v-bind:post="post"></blog-post>

傳入一個對象的所有屬性

如果你想要將一個對象的所有屬性都作為 prop 傳入，你可以使用不帶參數(shù)的 v-bind (取代 v-bind:prop-name)。例如，對于一個給定的對象 post：