vue props數(shù)據(jù)傳遞類(lèi)型限制方式
vue props數(shù)據(jù)傳遞類(lèi)型限制
1.第一種:不限制任何數(shù)據(jù)
props: ['test', 'test1'],?
2.第二種:只限制數(shù)據(jù)類(lèi)型
props: { ? ? test: String, ? ? test1: Number ? },?
3.第三種:限制數(shù)據(jù)類(lèi)型 必要參 默認(rèn)值
? props: { ? ? test: { ? ? ? type: String, // 字符類(lèi)型 ? ? ? required: true // 必要條件 ? ? }, ? ? test1: { ? ? ? type: Number, // 字符類(lèi)型 ? ? ? default: 99 // 默認(rèn)值 ? ? }, ? },
Vue中的配置項(xiàng)props
功能:讓組件接收外部傳入的數(shù)據(jù) 向子組件傳遞數(shù)據(jù)
(1).傳遞數(shù)據(jù)(父組件傳遞數(shù)據(jù))
< Student name="李四" :age="18" sex="女"/>
(2).接收數(shù)據(jù)(子組件接收數(shù)據(jù))
第一種方式(只接收)
簡(jiǎn)單的聲明接收
props:['name','sex','age']?
第二種方式(限制類(lèi)型)
接收的同時(shí)對(duì)數(shù)據(jù)進(jìn)行類(lèi)型限制
?props:{ ? ? ? ? ? ?name:String, ? ? ? ? ? ?age:Number, ? ? ? ? ? ?sex:String ? ? ? ? ?}?
第三種方式(限制類(lèi)型、限制必要性、指定默認(rèn)值)
接收數(shù)據(jù)的同時(shí):進(jìn)行類(lèi)型數(shù)據(jù)限制+默認(rèn)值+必要性的限制
?? ?props:{ ? ? ? ? ? ? ? ? name:{ ? ? ? ? ? ? ? ? ? ? type:String, //name的類(lèi)型是字符串 ? ? ? ? ? ? ? ? ? ? required:true //name是必要的 ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? ? ? age:{ ? ? ? ? ? ? ? ? ? ? type:Number, ? ? ? ? ? ? ? ? ? ? default:99 //默認(rèn)值 ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? ? ? sex:{ ? ? ? ? ? ? ? ? ? ? type:String, ? ? ? ? ? ? ? ? ? ? required:true ? ? ? ? ? ? ? ? } ? ? ? ? ? ? }
備注:props是只讀的,Vue底層會(huì)檢測(cè)你對(duì)props的修改,如果進(jìn)行了修改。就會(huì)發(fā)出警告,
若業(yè)務(wù)需求確實(shí)需要修改,那么請(qǐng)賦值props的內(nèi)容到data中一份,然后去修改data中的數(shù)據(jù)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue?url跳轉(zhuǎn)解析和參數(shù)編碼介紹
這篇文章主要介紹了vue?url跳轉(zhuǎn)解析和參數(shù)編碼,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03vue復(fù)合組件實(shí)現(xiàn)注冊(cè)表單功能
這篇文章主要為大家詳細(xì)介紹了vue復(fù)合組件實(shí)現(xiàn)注冊(cè)表單功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-11-11Vue數(shù)據(jù)驅(qū)動(dòng)模擬實(shí)現(xiàn)3
這篇文章主要為大家詳細(xì)介紹了Vue數(shù)據(jù)驅(qū)動(dòng)模擬實(shí)現(xiàn),教大家如何在某個(gè)對(duì)象中,新增某個(gè)屬性,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01Vue 中頁(yè)面?zhèn)髦档亩喾N方式小結(jié)
本文主要介紹了Vue 中頁(yè)面?zhèn)髦档亩喾N方式小結(jié),主要包括路由傳參、Vuex 狀態(tài)管理、Props 屬性和事件傳遞數(shù)據(jù)這幾種,具有一定的參考價(jià)值,感興趣的可以了解一下2023-10-10vue如何動(dòng)態(tài)實(shí)時(shí)的顯示時(shí)間淺析
這篇文章主要給大家介紹了關(guān)于vue如何動(dòng)態(tài)實(shí)時(shí)的顯示時(shí)間,以及vue時(shí)間戳 獲取本地時(shí)間實(shí)時(shí)更新的相關(guān)資料,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05Vue.js結(jié)合Ueditor富文本編輯器的實(shí)例代碼
本篇文章主要介紹了Vue.js結(jié)合Ueditor的項(xiàng)目實(shí)例代碼,這里整理了詳細(xì)的代碼,具有一定的參考價(jià)值,有興趣的可以了解一下2017-07-07vue中提示$index is not defined錯(cuò)誤的解決方式
這篇文章主要介紹了vue中提示$index is not defined錯(cuò)誤的解決方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09jenkins自動(dòng)構(gòu)建發(fā)布vue項(xiàng)目的方法步驟
這篇文章主要介紹了jenkins自動(dòng)構(gòu)建發(fā)布vue項(xiàng)目的方法步驟,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01