【快速入門Vue系列】第十一篇:父子元件的靜態/動態傳值!
- 本文已參與「掘力星計劃」,贏取創作大禮包,挑戰創作激勵金。
元件_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份掘金周邊實物,抽獎詳情見活動文章,小夥伴討論起來了!!
- Vue常用指令(大全)
- 網路協議概念速解(圖文並茂)
- 吃透HTTP(超文字傳輸協議)
- 快速入門PHP第一天,常用識別符號,運算子,迴圈語句
- 【快速入門Vue系列】第四十篇:Vuex的Action和Module的應用(系列完結篇)
- 【快速入門Vue系列】第三十九篇:Vuex的幾點細節,你值得擁有
- 網路協議是什麼五分鐘帶你快速理解
- 【快速入門Vue系列】第三十八篇:Vuex的Mutation超細講解,一看就會
- 【快速入門Vue系列】第三十七篇:Vuex的State與Getter詳解
- 【快速入門Vue系列】第三十六篇:VueRouter過渡動效、滾動行為、路由元資訊
- 【快速入門Vue系列】第三十四篇:全域性守衛和路由獨享守衛(導航守衛篇)
- 【快速入門Vue系列】第三十三篇:動態路由匹配、命名檢視、路由元件傳參,不懂請進
- 【快速入門Vue系列】第三十一篇:路由模式及VueRouter路由內的引數
- 【快速入門Vue系列】第三十篇:初識Vue路由,基本使用
- 【快速入門Vue系列】第二十九篇:多元素過渡、列表過渡、複用過渡、非同步元件你會幾個?
- 【快速入門Vue系列】第二十八篇:如何使用vue動畫,transition元件
- 【快速入門Vue系列】第二十七篇:初識vue動畫,transition元件
- 【快速入門Vue系列】第二十六篇:函式式元件,90%的人不知道
- 【快速入門Vue系列】第二十五篇:在Vue中使用JSX語法
- 【快速入門Vue系列】第二十三篇:節點、樹、以及虛擬DOM(渲染函式篇)