溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

詳解Vue內(nèi)部怎樣處理props選項(xiàng)的多種寫法

發(fā)布時(shí)間：2020-09-16 11:14:29 來源：腳本之家 閱讀：305 作者：邊城少年_ 欄目：web開發(fā)

開發(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)行處理，無(wú)論開發(fā)時(shí)使用了哪種語(yǔ)法，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)語(yǔ)法規(guī)范為基于對(duì)象的格式）
 */
 // 參數(shù)的寫法為 flow(https://flow.org/) 語(yǔ)法
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í)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手