聲明組件的 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
}
}
}
}
相關用法
- Vue.js provide用法及代碼示例
- Vue.js provide()用法及代碼示例
- Vue.js pipeToWebWritable()用法及代碼示例
- Vue.js pipeToNodeWritable()用法及代碼示例
- Vue.js useSSRContext()用法及代碼示例
- Vue.js app.directive()用法及代碼示例
- Vue.js mergeProps()用法及代碼示例
- Vue.js app.config.warnHandler用法及代碼示例
- Vue.js app.use()用法及代碼示例
- Vue.js v-pre用法及代碼示例
- Vue.js h()用法及代碼示例
- Vue.js serverPrefetch用法及代碼示例
- Vue.js customRef()用法及代碼示例
- Vue.js <Transition>用法及代碼示例
- Vue.js inject()用法及代碼示例
- Vue.js mixins用法及代碼示例
- Vue.js ComponentCustomProps用法及代碼示例
- Vue.js reactive()用法及代碼示例
- Vue.js ComponentCustomProperties用法及代碼示例
- Vue.js app.mount()用法及代碼示例
- Vue.js <component>用法及代碼示例
- Vue.js createRenderer()用法及代碼示例
- Vue.js onMounted()用法及代碼示例
- Vue.js createApp()用法及代碼示例
- Vue.js app.config.errorHandler用法及代碼示例
注:本文由純淨天空篩選整理自vuejs.org大神的英文原創作品 props。非經特殊聲明,原始代碼版權歸原作者所有,本譯文未經允許或授權,請勿轉載或複製。