當前位置: 首頁>>編程示例 >>用法及示例精選 >>正文


Vue.js props用法及代碼示例

聲明組件的 props。

類型

interface ComponentOptions {
  props?: ArrayPropsOptions | ObjectPropsOptions
}

type ArrayPropsOptions = string[]

type ObjectPropsOptions = { [key: string]: Prop }

type Prop<T = any> = PropOptions<T> | PropType<T> | null

interface PropOptions<T> {
  type?: PropType<T>
  required?: boolean
  default?: T | ((rawProps: object) => T)
  validator?: (value: unknown) => boolean
}

type PropType<T> = { new (): T } | { new (): T }[]

為了便於閱讀,類型被簡化了。

細節

在 Vue 中,所有組件的 props 都需要顯式聲明。組件 props 可以以兩種形式聲明:

  • 使用字符串數組的簡單形式
  • 使用對象的完整形式,其中每個屬性鍵是道具的名稱,值是道具的類型(構造函數)或高級選項。

使用基於對象的語法,每個 prop 可以進一步定義以下選項:

  • type: 可以是以下本機構造函數之一:String,Number,Boolean,Array,Object,Date,Function,Symbol,任何自定義構造函數或它們的數組。在開發模式下,Vue 會檢查 prop 的值是否與聲明的類型匹配,如果不匹配則會拋出警告。看道具驗證更多細節。

    另請注意,Boolean 類型的道具會影響其在開發和生產中的值轉換行為。有關詳細信息,請參閱Boolean Casting

  • default: 為 props 指定一個默認值,當它沒有被父級傳遞或有undefined值。必須使用工廠函數返回對象或數組默認值。工廠函數還接收原始 props 對象作為參數。

  • required:定義是否需要道具。在非生產環境中,如果該值是真實的並且沒有傳遞道具,則會拋出控製台警告。

  • validator: 以 prop 值作為唯一參數的自定義驗證器函數。在開發模式下,如果此函數返回錯誤值(即驗證失敗),將引發控製台警告。

示例

簡單聲明:

export default {
  props: ['size', 'myMessage']
}

帶有驗證的對象聲明:

export default {
  props: {
    // type check
    height: Number,
    // type check plus other validations
    age: {
      type: Number,
      default: 0,
      required: true,
      validator: (value) => {
        return value >= 0
      }
    }
  }
}

相關用法


注:本文由純淨天空篩選整理自vuejs.org大神的英文原創作品 props。非經特殊聲明,原始代碼版權歸原作者所有,本譯文未經允許或授權,請勿轉載或複製。