詳解Vue內(nèi)部怎樣處理props選項(xiàng)的多種寫法
開發(fā)過程中,props 的使用有兩種寫法:
// 字符串?dāng)?shù)組寫法
const subComponent = {
props: ['name']
}
// 對(duì)象寫法
const subComponent = {
props: {
name: {
type: String,
default: 'Kobe Bryant'
}
}
}
Vue在內(nèi)部會(huì)對(duì) props 選項(xiàng)進(jìn)行處理,無論開發(fā)時(shí)使用了哪種語法,Vue都會(huì)將其規(guī)范化為對(duì)象的形式。具體規(guī)范方式見Vue源碼 src/core/util/options.js 文件中的 normalizeProps 函數(shù):
/**
* Ensure all props option syntax are normalized into the
* Object-based format.(確保將所有props選項(xiàng)語法規(guī)范為基于對(duì)象的格式)
*/
// 參數(shù)的寫法為 flow(https://flow.org/) 語法
function normalizeProps (options: Object, vm: ?Component) {
const props = options.props
// 如果選項(xiàng)中沒有props,那么直接return
if (!props) return
// 如果有,開始對(duì)其規(guī)范化
// 聲明res,用于保存規(guī)范化后的結(jié)果
const res = {}
let i, val, name
if (Array.isArray(props)) {
// 使用字符串?dāng)?shù)組的情況
i = props.length
// 使用while循環(huán)遍歷該字符串?dāng)?shù)組
while (i--) {
val = props[i]
if (typeof val === 'string') {
// props數(shù)組中的元素為字符串的情況
// camelize方法位于 src/shared/util.js 文件中,用于將中橫線轉(zhuǎn)為駝峰
name = camelize(val)
res[name] = { type: null }
} else if (process.env.NODE_ENV !== 'production') {
// props數(shù)組中的元素不為字符串的情況,在非生產(chǎn)環(huán)境下給予警告
// warn方法位于 src/core/util/debug.js 文件中
warn('props must be strings when using array syntax.')
}
}
} else if (isPlainObject(props)) {
// 使用對(duì)象的情況(注)
// isPlainObject方法位于 src/shared/util.js 文件中,用于判斷是否為普通對(duì)象
for (const key in props) {
val = props[key]
name = camelize(key)
// 使用for in循環(huán)對(duì)props每一個(gè)鍵的值進(jìn)行判斷,如果是普通對(duì)象就直接使用,否則將其作為type的值
res[name] = isPlainObject(val)
? val
: { type: val }
}
} else if (process.env.NODE_ENV !== 'production') {
// 使用了props選項(xiàng),但它的值既不是字符串?dāng)?shù)組,又不是對(duì)象的情況
// toRawType方法位于 src/shared/util.js 文件中,用于判斷真實(shí)的數(shù)據(jù)類型
warn(
`Invalid value for option "props": expected an Array or an Object, ` +
`but got ${toRawType(props)}.`,
vm
)
}
options.props = res
}
如此一來,假如我的 props 是一個(gè)字符串?dāng)?shù)組:
props: ["team"]
經(jīng)過這個(gè)函數(shù)之后,props 將被規(guī)范為:
props: {
team:{
type: null
}
}
假如我的 props 是一個(gè)對(duì)象:
props: {
name: String,
height: {
type: Number,
default: 198
}
}
經(jīng)過這個(gè)函數(shù)之后,將被規(guī)范化為:
props: {
name: {
type: String
},
height: {
type: Number,
default: 198
}
}
注:對(duì)象的寫法也分為以下兩種,故仍需進(jìn)行規(guī)范化
props: {
// 第一種寫法,直接寫類型
name: String,
// 第二種寫法,寫對(duì)象
name: {
type: String,
default: 'Kobe Bryant'
}
}
最終會(huì)被規(guī)范為第二種寫法。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
前端使用vue點(diǎn)擊上傳文件傳送給后端并進(jìn)行文件接收的方法
這篇文章主要介紹了如何在前端和后端實(shí)現(xiàn)文件傳輸,前端使用Vue.js發(fā)送文件,后端使用Java接收文件并處理,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-01-01
在Vue 中實(shí)現(xiàn)循環(huán)渲染多個(gè)相同echarts圖表
這篇文章主要介紹了在Vue 中實(shí)現(xiàn)循環(huán)渲染多個(gè)相同echarts圖表,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vue 使用Props屬性實(shí)現(xiàn)父子組件的動(dòng)態(tài)傳值詳解
今天小編就為大家分享一篇Vue 使用Props屬性實(shí)現(xiàn)父子組件的動(dòng)態(tài)傳值詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vux+Axios攔截器增加loading的問題及實(shí)現(xiàn)方法
這篇文章主要介紹了Vux+Axios攔截器增加loading的問題及實(shí)現(xiàn)方法,文中通過實(shí)例代碼介紹了vue中使用axios的相關(guān)知識(shí),需要的朋友可以參考下2018-11-11
vue+axios實(shí)現(xiàn)圖片上傳識(shí)別人臉的示例代碼
本文主要介紹了vue+axios實(shí)現(xiàn)圖片上傳識(shí)別人臉,這里采用的是vant的文件上傳組件,通過上傳圖片后端識(shí)別圖片里的人臉,感興趣的可以了解一下2021-11-11
vue 實(shí)現(xiàn)根據(jù)data中的屬性值來設(shè)置不同的樣式
這篇文章主要介紹了vue 實(shí)現(xiàn)根據(jù)data中的屬性值來設(shè)置不同的樣式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08

