Vue 元件 驗證props

2021-09-24 17:27:47 字數 823 閱讀 5383

本節需要基礎:【vue】元件通訊(父傳子 props)

props主要作用是讓父元件傳值給子元件。

普通的傳值方式做上面的鏈結有講到。

props: ['引數名']
普通傳值,可以把要傳的值放在乙個陣列裡,也可以放在乙個物件裡。

props: ['引數1', '引數2', ... '引數n']

props:
比如

props:
也可以定義多種型別,只需把所有型別都放在乙個陣列裡面。

props:

props: 

}

設定required: true,則該引數是必傳參。

如果父元件沒把該引數傳過來的話,就會報錯!

props: 

}

通過default可以設定預設值。

當父元件沒有把該引數傳過來的時候,就會用定義的預設值作為值。

如果父元件有把該引數傳過來的話,父元件傳過來的引數值就會覆蓋這個預設值。

如果設定了default,那麼required就不用設定了。因為有了預設值,再設定必選項的話就沒意義了。

vue 元件開發 props 驗證

在vue中父元件向子元件中傳送資料是通過props實現的,乙個簡單的使用props的例子 1 2 37 8 11 12 131432 33 但是上面這種方式是建立在大家都很遵守約定的情況下的,想象一下當有乙個人要使用foo component元件的時候,他可能對於其要接受的引數有什麼要求並不是很清楚...

vue子元件props寫法

prop vue.js文件 camelcase 駝峰命名法 的 prop 名需要使用其等價的 kebab case 短橫線分隔命名 命名 props title likes ispublished commentids author props 帶有預設值的數字 propd 帶有預設值的物件 pro...

Vue之元件(Props特性深析)

1 prop 的命名風格 前言 案例 要求所傳引數數值必須在18 50之間 validator為函式格式,且接收引數value即為props傳值大小,返回值為自定義校驗限制範圍 分類型別 基礎資料型別type校驗 多條件資料型別type校驗 必填項required校驗 預設值default校驗 自定...