vue屬性props默認(rèn)類型的寫法介紹
vue屬性props默認(rèn)類型
Vue.component('my-component', { props: { // 基礎(chǔ)的類型檢查 (`null` 匹配任何類型) //單個(gè)類型 propA: Number, // 多個(gè)可能的類型 propB: [String, Number], // 必填的字符串 propC: { type: String, required: true }, //函數(shù) propC: { type:Function, required: true }, // 帶有默認(rèn)值的數(shù)字 propD: { type: Number, default: 100 }, //多個(gè)可能類型帶默認(rèn)值 propE: { type: [String, Number], default: 100 }, // 帶有默認(rèn)值的對(duì)象 propF: { type: Object, // 對(duì)象或數(shù)組且一定會(huì)從一個(gè)工廠函數(shù)返回默認(rèn)值 default: function () { return { message: 'hello' } } }, // 自定義驗(yàn)證函數(shù) propG: { validator: function (value) { // 這個(gè)值必須匹配下列字符串中的一個(gè) return ['success', 'warning', 'danger'].indexOf(value) !== -1 } } } })
props自定義屬性
1.這是一個(gè)自定義屬性,在封裝通用組件的時(shí)候,合理地使用props可以極大的提高組件的復(fù)用性
2.語法:可以定義為數(shù)組類型的:
export default { ? ? props:['init'] }
也可以定義為對(duì)象類型:
export default { ? // props 是"自定義屬性",允許使用者通過自定義屬性,為當(dāng)前組件指定初始值 ? // 自定義屬性的名字,是封裝者自定義的(只要名稱合法即可) ? // props 中的數(shù)據(jù),可以直接在模板結(jié)構(gòu)中被使用 ? // 注意:props 是只讀的,不要直接修改 props 的值,否則終端會(huì)報(bào)錯(cuò)! ? // props: ['init'], ? props: { ? ? // 自定義屬性A : { /* 配置選項(xiàng) */ }, ? ? // 自定義屬性B : { /* 配置選項(xiàng) */ }, ? ? // 自定義屬性C : { /* 配置選項(xiàng) */ }, ? ? init: { ? ? ? // 如果外界使用 Count 組件的時(shí)候,沒有傳遞 init 屬性,則默認(rèn)值生效 ? ? ? default: 0, ? ? ? // init 的值類型必須是 Number 數(shù)字 ? ? ? type: Number, ? ? ? // 必填項(xiàng)校驗(yàn) ? ? ? required: true ? ? } ? }, }
注意:數(shù)組類型是沒有default屬性的,只有定義為對(duì)象類型才存在
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue+axios實(shí)現(xiàn)post文件下載
這篇文章主要為大家詳細(xì)介紹了vue+axios實(shí)現(xiàn)post文件下載,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-09-09Vue項(xiàng)目打包問題詳解(生產(chǎn)環(huán)境樣式失效)
在Vue開發(fā)過程中,項(xiàng)目的打包是一個(gè)非常重要的步驟,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目打包問題(生產(chǎn)環(huán)境樣式失效)的相關(guān)資料,文中介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12快速解決Vue、element-ui的resetFields()方法重置表單無效的問題
這篇文章主要介紹了快速解決Vue、element-ui的resetFields()方法重置表單無效的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08vue中提示$index is not defined錯(cuò)誤的解決方式
這篇文章主要介紹了vue中提示$index is not defined錯(cuò)誤的解決方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09vue實(shí)現(xiàn)手機(jī)號(hào)碼的校驗(yàn)實(shí)例代碼(防抖函數(shù)的應(yīng)用場景)
這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)手機(jī)號(hào)碼的校驗(yàn)的相關(guān)資料,主要是防抖函數(shù)的應(yīng)用場景,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09利用Vue.js框架實(shí)現(xiàn)火車票查詢系統(tǒng)(附源碼)
這篇文章主要介紹了利用Vue.js框架實(shí)現(xiàn)火車票查詢系統(tǒng)的相關(guān)資料,,文中給出了詳細(xì)的介紹與示例代碼,并在文章結(jié)尾給出了完整的項(xiàng)目下載,需要的朋友可以參考借鑒,下面來一起看看吧。2017-02-02Vue項(xiàng)目引進(jìn)ElementUI組件的方法
這篇文章主要介紹了Vue項(xiàng)目引進(jìn)ElementUI組件的方法,本文分步驟給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2018-11-11Vue實(shí)現(xiàn)簡單基礎(chǔ)的圖片裁剪功能
這篇文章主要為大家詳細(xì)介紹了如何利用Vue2實(shí)現(xiàn)簡單基礎(chǔ)的圖片裁剪功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起了解一下2022-09-09