• 本文已參與「掘力星計劃」，贏取創作大禮包，挑戰創作激勵金。

元件_Prop

註冊自定義特性

元件預設只是寫好結構、樣式和行為，使用的資料應由外界傳遞給元件。

如何傳遞？註冊需要接收的prop，將資料作為一個自定義特性傳遞給元件。

如：

```html

```

js Vue.component('video-item', { props: ['title', 'poster', 'play', 'rank'], })

在上述模板中，你會發現我們能夠在元件例項中訪問這個值，就像訪問 data 中的值一樣：

```html

```

js Vue.component('video-item', { props: ['title', 'poster', 'play', 'rank'], template: `<div>{{ title }}</div>` })

Prop的大小寫

HTML 中的特性名是大小寫不敏感的，所以瀏覽器會把所有大寫字元解釋為小寫字元。故：當 傳遞的prop為 短橫線分隔命名時，元件內 的props 應為 駝峰命名 。 如：

```html

```

js Vue.component('video-item', { // 在 JavaScript 中是 camelCase 的 props: ['subTitle'], template: '<h3>{{ postTitle }}</h3>' })

要注意的是：如果使用的是字串模板，那麼這個限制就不存在了。

傳遞靜態或動態 Prop

像這樣，我們已經知道了可以給 prop 傳入一個靜態的值：

html <video-item title="羊村搖"></video-item>

若想要傳遞一個動態的值，可以配合v-bind指令進行傳遞，如：

html <video-item :title="title"></video-item>

傳遞一個物件的所有屬性

如果你想要將一個物件的所有屬性都作為 prop 傳入，你可以使用不帶引數的 v-bind 。例如，對於一個給定的物件 person：

js person: { name: 'shanshan', age: 18 }

傳遞全部屬性：

html <my-component v-bind="person"></my-component>

上述程式碼等價於：

```html <my-component :name="person.name" :age="person.age"

```

元件_Prop驗證

我們可以為元件的 prop 指定驗證要求，例如你可以要求一個 prop 的型別為什麼。如果說需求沒有被滿足的話，那麼Vue會在瀏覽器控制檯中進行警告，這在開發一個會被別人用到的元件時非常的有幫助。

為了定製 prop 的驗證方式，你可以為 props 中的值提供一個帶有驗證需求的物件，而不是一個字串陣列。例如：

js Vue.component('my-component', { props: { title: String, likes: Number, isPublished: Boolean, commentIds: Array, author: Object, callback: Function, contactsPromise: Promise } })

上述程式碼中，對prop進行了基礎的型別檢查，型別值可以為下列原生建構函式中的一種：String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定義建構函式、或上述內容組成的陣列。 需要注意的是null 和 undefined 會通過任何型別驗證。 除基礎型別檢查外，我們還可以配置高階選項，對prop進行其他驗證，如：型別檢測、自定義驗證和設定預設值。 如：

js Vue.component('my-component', { props: { title: { type: String, // 檢查 prop 是否為給定的型別 default: '杉杉最美', // 為該 prop 指定一個預設值，物件或陣列的預設值必須從一個工廠函式返回，如：default () { return {a: 1, b: 10} }, required: true, // 定義該 prop 是否是必填項 validator (prop) { // 自定義驗證函式，該prop的值回作為唯一的引數代入，若函式返回一個falsy的值，那麼就代表驗證失敗 return prop.length < 140; } } } })

為了更好的團隊合作，在提交的程式碼中，prop 的定義應該儘量詳細，至少需要指定其型別。

元件_單向資料流

所有的 prop 都使得其父子 prop 之間形成了一個單向下行繫結：父級 prop 的更新會向下流動到子元件中，但是反過來則不行。這樣會防止從子元件意外改變父級元件的狀態，從而導致你的應用的資料流向難以理解。

這裡有兩種常見的試圖改變一個 prop 的情形：

這個 prop 用來傳遞一個初始值；這個子元件接下來希望將其作為一個本地的 prop 資料來使用，在後續操作中，會將這個值進行改變。在這種情況下，最好定義一個本地的 data 屬性並將這個 prop 用作其初始值： js props: ['initialCounter'], data: function () { return { counter: this.initialCounter } } 這個 prop 以一種原始的值傳入且需要進行轉換。在這種情況下，最好使用這個 prop 的值來定義一個計算屬性： js props: ['size'], computed: { normalizedSize: function () { return this.size.trim().toLowerCase() } }

最後

如果對您有幫助，希望能給個👍評論收藏三連！

博主為人老實，無償解答問題哦❤

• 歡迎在評論區討論，掘金官方將在掘力星計劃活動結束後，在評論區抽送100份掘金周邊實物，抽獎詳情見活動文章，小夥伴討論起來了！！