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>

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

Prop 類型

到這里，我們只看到了以字符串數組形式列出的 prop：

props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

但是，通常你希望每個 prop 都有指定的值類型。這時，你可以以對象形式列出 prop，這些屬性的名稱和值分別是 prop 各自的名稱和類型：

props: {title: String,likes: Number,isPublished: Boolean,commentIds: Array,author: Object }

這不僅為你的組件提供了文檔，還會在它們遇到錯誤的類型時從瀏覽器的 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-postv-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 來說，在子組件中改變這個對象或數組本身將會影響到父組件的狀態。

Prop 驗證

我們可以為組件的 prop 指定驗證要求，例如你知道的這些類型。如果有一個需求沒有被滿足，則 Vue 會在瀏覽器控制臺中警告你。這在開發一個會被別人用到的組件時尤其有幫助。

為了定制 prop 的驗證方式，你可以為?props?中的值提供一個帶有驗證需求的對象，而不是一個字符串數組。例如：

Vue.component('my-component', {props: {// 基礎的類型檢查 (`null` 匹配任何類型)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 會在一個組件實例創建之前進行驗證，所以實例的屬性 (如?data、computed?等) 在?default?或?validator?函數中是不可用的。

類型檢查

type?可以是下列原生構造函數中的一個：

• String
• Number
• Boolean
• Array
• Object
• Date
• Function
• Symbol

額外的，type?還可以是一個自定義的構造函數，并且通過?instanceof?來進行檢查確認。例如，給定下列現成的構造函數：

function Person (firstName, lastName) {this.firstName = firstNamethis.lastName = lastName }

你可以使用：

Vue.component('blog-post', {props: {author: Person} })

來驗證?author?prop 的值是否是通過?new Person?創建的。

非 Prop 的特性

一個非 prop 特性是指傳向一個組件，但是該組件并沒有相應 prop 定義的特性。

因為顯式定義的 prop 適用于向一個子組件傳入信息，然而組件庫的作者并不總能預見組件會被用于怎樣的場景。這也是為什么組件可以接受任意的特性，而這些特性會被添加到這個組件的根元素上。

例如，想象一下你通過一個 Bootstrap 插件使用了一個第三方的?<bootstrap-date-input>?組件，這個插件需要在其?<input>?上用到一個?data-date-picker?特性。我們可以將這個特性添加到你的組件實例上：

<bootstrap-date-input data-date-picker="activated"></bootstrap-date-input>

然后這個?data-date-picker="activated"?特性就會自動添加到?<bootstrap-date-input>?的根元素上。

替換/合并已有的特性

想象一下?<bootstrap-date-input>?的模板是這樣的：

<input type="date" class="form-control">

為了給我們的日期選擇器插件定制一個主題，我們可能需要像這樣添加一個特別的類名：

<bootstrap-date-inputdata-date-picker="activated"class="date-picker-theme-dark" ></bootstrap-date-input>

在這種情況下，我們定義了兩個不同的?class?的值：

• form-control，這是在組件的模板內設置好的
• date-picker-theme-dark，這是從組件的父級傳入的

對于絕大多數特性來說，從外部提供給組件的值會替換掉組件內部設置好的值。所以如果傳入?type="text"?就會替換掉?type="date"?并把它破壞！慶幸的是，class和?style?特性會稍微智能一些，即兩邊的值會被合并起來，從而得到最終的值：form-control date-picker-theme-dark。

禁用特性繼承

如果你不希望組件的根元素繼承特性，你可以在組件的選項中設置?inheritAttrs: false。例如：

Vue.component('my-component', {inheritAttrs: false,// ... })

這尤其適合配合實例的?$attrs?屬性使用，該屬性包含了傳遞給一個組件的特性名和特性值，例如：

{class: 'username-input',placeholder: 'Enter your username' }

有了?inheritAttrs: false?和?$attrs，你就可以手動決定這些特性會被賦予哪個元素。在撰寫基礎組件的時候是常會用到的：

Vue.component('base-input', {inheritAttrs: false,props: ['label', 'value'],template: `<label>{{ label }}<inputv-bind="$attrs"v-bind:value="value"v-on:input="$emit('input', $event.target.value)"></label>` })

這個模式允許你在使用基礎組件的時候更像是使用原始的 HTML 元素，而不會擔心哪個元素是真正的根元素：

<base-inputv-model="username"class="username-input"placeholder="Enter your username" ></base-input>

?

?

from:?https://cn.vuejs.org/v2/guide/components-props.html

總結

以上是生活随笔為你收集整理的Vue.js Prop的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。