在vue中父元件向子元件中傳送資料是通過props實現的，乙個簡單的使用props的例子：
1但是上面這種方式是建立在大家都很遵守約定的情況下的，想象一下當有乙個人要使用foo-component元件的時候，他可能對於其要接受的引數有什麼要求並不是很清楚，因此傳入的引數可能會在開發子元件的人的意料之外，程式就會發生錯誤，就像我們在函式呼叫之前先檢查一下函式一樣，props也可以進行乙個預先檢查。2 37 8
11
12
131432
33
可以使用type來宣告這個引數可以接受的資料的型別，當檢查規則只有乙個的時候type可以略寫：
當引數可以是多種型別的其中乙個的時候，使用陣列來表示。
1type可以是以下原生型別：2 37 8
11
12
131434
35 36
string
number
boolean
function
object
array
symbol
可以使用required選項來宣告這個引數是否必須傳入。
1當未傳入引數時：2 37 8
11
12
131437
38
使用default選項來指定當父元件未傳入引數時props變數的預設值：
1當父元件未傳入引數時子元件的值是128，當父元件傳入引數時是其指定的引數，比如這裡可以是256。2 37 8
11
12
131437
38
當type的型別為array或者object的時候default必須是乙個函式：
1那麼required和default是否能同時出現在乙個props變數中呢？2 37 8
11
12
131439
40
1渲染結果：2 37 8
11
12
131438
39
儘管控制台上vue報了錯誤，但是props變數foomessage還是使用了設定的default值。
事情不會這麼簡單，再測試一下其它的情況，比如當傳入的引數驗證不通過的時候：
1渲染結果：2 37 8
11
12
131436
37
foomessage要求的型別是number，傳入了乙個string型別的，儘管在控制台提示報了錯，但是仍然將其渲染了出來。
當校驗規則很複雜，預設提供的校驗規則無法滿足的時候可以使用自定義函式來校驗。
12 37 8
11
12
131438
39
1 props: ,11 // food接受數值型別的引數，如果不傳入的話預設就是100
12 food: ,
16 // fooe接受物件型別的引數
17 fooe:
22 }
23 },
24 // foof使用乙個自定義的驗證器
25 foof:
29 }
30 }
Vue 元件 驗證props
本節需要基礎 vue 元件通訊 父傳子 props props主要作用是讓父元件傳值給子元件。普通的傳值方式做上面的鏈結有講到。props 引數名 普通傳值，可以把要傳的值放在乙個陣列裡，也可以放在乙個物件裡。props 引數1 引數2 引數n props 比如 props 也可以定義多種型別，只需...
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校驗 自定...