Vue中Prop的作用有哪些
Vue中Prop的作用有哪些？針對(duì)這個(gè)問題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡(jiǎn)單易行的方法。
創(chuàng)新互聯(lián)是一家以成都網(wǎng)站建設(shè)公司、網(wǎng)頁設(shè)計(jì)、品牌設(shè)計(jì)、軟件運(yùn)維、營(yíng)銷推廣、小程序App開發(fā)等移動(dòng)開發(fā)為一體互聯(lián)網(wǎng)公司。已累計(jì)為成都辦公窗簾等眾行業(yè)中小客戶提供優(yōu)質(zhì)的互聯(lián)網(wǎng)建站和軟件開發(fā)服務(wù)。
Prop
基本用法
Prop的基本用法很簡(jiǎn)單，只需要在子組件的Vue實(shí)例中定義該屬性并把值設(shè)為目標(biāo)屬性的數(shù)組即可
Vue.component('child', {
...
// 接收message
props: ['message']
...
})tips：由于HTML中的屬性是不區(qū)分大小寫的，所以當(dāng)使用DOM中的模板（HTML中）時(shí)，駝峰寫法需要轉(zhuǎn)化為短橫線寫法。但是，如果使用字符串模板（JS中）時(shí)，不受限制，可以為所欲為。
Prop中的靜態(tài)和動(dòng)態(tài)值
在正常情況下，一般在父組件中通過v-bind定義一個(gè)動(dòng)態(tài)值，子組件通過Prop接收該值，所以，很多人認(rèn)為，Prop只能接收動(dòng)態(tài)值。但是，其實(shí)Prop可以接受靜態(tài)屬性。
示例：
/* 父組件 */
/* 子組件 */
Vue.component('child', {
...
// 成功接收
props: ['type']
...
})
在示例中，父組件在子組件標(biāo)簽上定義了靜態(tài)屬性type，子組件依然通過Prop拿到了靜態(tài)屬性type。
單向數(shù)據(jù)流
所有的 prop 都使得其父子 prop 之間形成了一個(gè)單向下行綁定：父組件的 Prop 的更新會(huì)向下流動(dòng)到子組件中，但是反過來則不行。這樣會(huì)防止從子組件意外改變父組件以及同級(jí)子組件的狀態(tài)，從而導(dǎo)致你的應(yīng)用的數(shù)據(jù)流向難以理解。
另外，每次父組件發(fā)生更新時(shí)，子組件中所有的Prop都將刷新為最新的值。這意味著你不應(yīng)該在子組件內(nèi)部改變Prop，如果你這樣做了，Vue會(huì)在控制臺(tái)拋出一個(gè)警告。
一般來說，如果子組件需要操作Prop中的值，需要將Prop中的值賦值給本地定義的屬性：
...
props: ['message'],
data () {
return {
mes: this.message
}
}
...非Prop特性
非Props特性是指在組件上定義了屬性，而又沒有使用Prop接受屬性。此時(shí)，子組件內(nèi)不可使用該屬性值，該屬性會(huì)直接添加到子組件的根節(jié)點(diǎn)上。
比如，在一個(gè)只含有一個(gè)div的子組件上，如果我向子組件傳了一個(gè)content屬性，但是子組件不使用Prop接收content屬性，則渲染結(jié)果為：
Prop校驗(yàn)
子組件用Props接收父組件傳來的消息有多種形式：
1.數(shù)組形式
props: [data1, data2]
數(shù)組形式相當(dāng)于直接接收消息，不做任何校驗(yàn)，一般來說，不太建議使用數(shù)組形式。
2.簡(jiǎn)單對(duì)象形式
props: {
data1: String,
data2: Array
}簡(jiǎn)單對(duì)象形式對(duì)父組件傳遞的值進(jìn)行了類型校驗(yàn)，如果傳過來的值類型不一致，控制臺(tái)會(huì)報(bào)錯(cuò)。
3.復(fù)雜對(duì)象形式
props: {
data1: {
type: String,
required: true,
default: 'default value',
validator (value) {
return (value.length < 5)
}
},
data2: {
type: Array,
required: true,
default: () => ['', '', '']
}
}復(fù)雜對(duì)象形式的情況下，作為對(duì)象屬性的參數(shù)可以寫為對(duì)象形式，參數(shù)對(duì)象含有4個(gè)屬性，type、required、default、validator。
type：設(shè)定參數(shù)類型，當(dāng)傳入?yún)?shù)類型與type不相符時(shí)，控制臺(tái)會(huì)報(bào)錯(cuò)
required：設(shè)定參數(shù)是否是必傳，當(dāng)設(shè)為true時(shí)，不傳該參數(shù)會(huì)報(bào)錯(cuò)
default：設(shè)定默認(rèn)值，當(dāng)參數(shù)類型為復(fù)雜類型時(shí)，需使用工廠模式生成默認(rèn)值，否則Vue會(huì)在控制臺(tái)拋出警告。如圖所示，就通過工廠模式生成了一個(gè)長(zhǎng)度為3的空數(shù)組。
validator：校驗(yàn)器，是一個(gè)函數(shù)，擁有一個(gè)代表傳入值的形參，可以自定義各種校驗(yàn)，當(dāng)返回false時(shí)，會(huì)報(bào)錯(cuò)，表示沒通過校驗(yàn)。
關(guān)于Vue中Prop的作用有哪些問題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。
當(dāng)前文章：Vue中Prop的作用有哪些
鏈接URL：
http://weahome.cn/article/isgics.html
重慶分公司
重慶分公司
