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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。