建站
咨詢
售后
建站咨詢
新聞中心
該頁(yè)面假設(shè)你已經(jīng)閱讀過了組件基礎(chǔ)。如果你還對(duì)組件不太了解，推薦你先閱讀它。
#Prop 類型
到這里，我們只看到了以字符串?dāng)?shù)組形式列出的 prop：
props: ['title', 'likes', 'isPublished', 'commentIds', 'author']但是，通常你希望每個(gè) prop 都有指定的值類型。這時(shí)，你可以以對(duì)象形式列出 prop，這些 property 的名稱和值分別是 prop 各自的名稱和類型：
props: {
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object,
callback: Function,
contactsPromise: Promise // 或任何其他構(gòu)造函數(shù)
}這不僅為你的組件提供了文檔，還會(huì)在它們遇到錯(cuò)誤的類型時(shí)從瀏覽器的 JavaScript 控制臺(tái)提示用戶。你會(huì)在這個(gè)頁(yè)面接下來的部分看到類型檢查和其它 prop 驗(yàn)證。
#傳遞靜態(tài)或動(dòng)態(tài)的 Prop
這樣，你已經(jīng)知道了可以像這樣給 prop 傳入一個(gè)靜態(tài)的值：
你也知道 prop 可以通過 v-bind 或簡(jiǎn)寫 : 動(dòng)態(tài)賦值，例如：
在上述兩個(gè)示例中，我們傳入的值都是字符串類型的，但實(shí)際上任何類型的值都可以傳給一個(gè) prop。
#傳入一個(gè)數(shù)字
#傳入一個(gè)布爾值
#傳入一個(gè)數(shù)組
#傳入一個(gè)對(duì)象
#傳入一個(gè)對(duì)象的所有 property
如果你想要將一個(gè)對(duì)象的所有 property 都作為 prop 傳入，你可以使用不帶參數(shù)的 v-bind (取代 v-bind:prop-name)。例如，對(duì)于一個(gè)給定的對(duì)象 post：
post: {
id: 1,
title: 'My Journey with Vue'
}下面的模板：
等價(jià)于：
#單向數(shù)據(jù)流
所有的 prop 都使得其父子 prop 之間形成了一個(gè)單向下行綁定：父級(jí) prop 的更新會(huì)向下流動(dòng)到子組件中，但是反過來則不行。這樣會(huì)防止從子組件意外變更父級(jí)組件的狀態(tài)，從而導(dǎo)致你的應(yīng)用的數(shù)據(jù)流向難以理解。
另外，每次父級(jí)組件發(fā)生變更時(shí)，子組件中所有的 prop 都將會(huì)刷新為最新的值。這意味著你不應(yīng)該在一個(gè)子組件內(nèi)部改變 prop。如果你這樣做了，Vue 會(huì)在瀏覽器的控制臺(tái)中發(fā)出警告。
這里有兩種常見的試圖變更一個(gè) prop 的情形：
- 這個(gè) prop 用來傳遞一個(gè)初始值；這個(gè)子組件接下來希望將其作為一個(gè)本地的 prop 數(shù)據(jù)來使用。在這種情況下，最好定義一個(gè)本地的 data property 并將這個(gè) prop 作為其初始值：
props: ['initialCounter'],
data() {
return {
counter: this.initialCounter
}
}- 這個(gè) prop 以一種原始的值傳入且需要進(jìn)行轉(zhuǎn)換。在這種情況下，最好使用這個(gè) prop 的值來定義一個(gè)計(jì)算屬性：
props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}提示
注意在 JavaScript 中對(duì)象和數(shù)組是通過引用傳入的，所以對(duì)于一個(gè)數(shù)組或?qū)ο箢愋偷?prop 來說，在子組件中改變變更這個(gè)對(duì)象或數(shù)組本身將會(huì)影響到父組件的狀態(tài)。
#Prop 驗(yàn)證
我們可以為組件的 prop 指定驗(yàn)證要求，例如你知道的這些類型。如果有一個(gè)需求沒有被滿足，則 Vue 會(huì)在瀏覽器控制臺(tái)中警告你。這在開發(fā)一個(gè)會(huì)被別人用到的組件時(shí)尤其有幫助。
為了定制 prop 的驗(yàn)證方式，你可以為 props 中的值提供一個(gè)帶有驗(yàn)證需求的對(duì)象，而不是一個(gè)字符串?dāng)?shù)組。例如：
app.component('my-component', {
props: {
// 基礎(chǔ)的類型檢查 (`null` 和 `undefined` 會(huì)通過任何類型驗(yàn)證)
propA: Number,
// 多個(gè)可能的類型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true
},
// 帶有默認(rèn)值的數(shù)字
propD: {
type: Number,
default: 100
},
// 帶有默認(rèn)值的對(duì)象
propE: {
type: Object,
// 對(duì)象或數(shù)組默認(rèn)值必須從一個(gè)工廠函數(shù)獲取
default: function() {
return { message: 'hello' }
}
},
// 自定義驗(yàn)證函數(shù)
propF: {
validator: function(value) {
// 這個(gè)值必須匹配下列字符串中的一個(gè)
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
},
// 具有默認(rèn)值的函數(shù)
propG: {
type: Function,
// 與對(duì)象或數(shù)組默認(rèn)值不同，這不是一個(gè)工廠函數(shù) —— 這是一個(gè)用作默認(rèn)值的函數(shù)
default: function() {
return 'Default function'
}
}
}
})當(dāng) prop 驗(yàn)證失敗的時(shí)候，(開發(fā)環(huán)境構(gòu)建版本的) Vue 將會(huì)產(chǎn)生一個(gè)控制臺(tái)的警告。
提示
注意那些 prop 會(huì)在一個(gè)組件實(shí)例創(chuàng)建之前進(jìn)行驗(yàn)證，所以實(shí)例的 property (如 data、computed 等) 在 default 或 validator 函數(shù)中是不可用的。
#類型檢查
type 可以是下列原生構(gòu)造函數(shù)中的一個(gè)：
- String
- Number
- Boolean
- Array
- Object
- Date
- Function
- Symbol
此外，type 還可以是一個(gè)自定義的構(gòu)造函數(shù)，并且通過 instanceof 來進(jìn)行檢查確認(rèn)。例如，給定下列現(xiàn)成的構(gòu)造函數(shù)：
function Person(firstName, lastName) {
this.firstName = firstName
this.lastName = lastName
}你可以使用：
app.component('blog-post', {
props: {
author: Person
}
}) 用于驗(yàn)證 author prop 的值是否是通過 new Person 創(chuàng)建的。
#Prop 的大小寫命名 (camelCase vs kebab-case)
HTML 中的 attribute 名是大小寫不敏感的，所以瀏覽器會(huì)把所有大寫字符解釋為小寫字符。這意味著當(dāng)你使用 DOM 中的模板時(shí)，camelCase (駝峰命名法) 的 prop 名需要使用其等價(jià)的 kebab-case (短橫線分隔命名) 命名：
const app = Vue.createApp({})
app.component('blog-post', {
// camelCase in JavaScript
props: ['postTitle'],
template: '{{ postTitle }}
'
})
重申一次，如果你使用字符串模板，那么這個(gè)限制就不存在了。
網(wǎng)頁(yè)題目：創(chuàng)新互聯(lián)VUE3教程：Vue 3.0 Props
轉(zhuǎn)載來于：http://www.dlmjj.cn/article/djggish.html
