本節需要基礎:【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校驗 自定...