vue props數(shù)據(jù)傳遞類型限制方式
更新時間:2022年10月18日 10:27:52 作者:詞不達意難知
這篇文章主要介紹了vue props數(shù)據(jù)傳遞類型限制方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
vue props數(shù)據(jù)傳遞類型限制
1.第一種:不限制任何數(shù)據(jù)
props: ['test', 'test1'],?
2.第二種:只限制數(shù)據(jù)類型
props: { ? ? test: String, ? ? test1: Number ? },?
3.第三種:限制數(shù)據(jù)類型 必要參 默認值
? props: { ? ? test: { ? ? ? type: String, // 字符類型 ? ? ? required: true // 必要條件 ? ? }, ? ? test1: { ? ? ? type: Number, // 字符類型 ? ? ? default: 99 // 默認值 ? ? }, ? },
Vue中的配置項props
功能:讓組件接收外部傳入的數(shù)據(jù) 向子組件傳遞數(shù)據(jù)
(1).傳遞數(shù)據(jù)(父組件傳遞數(shù)據(jù))
< Student name="李四" :age="18" sex="女"/>
(2).接收數(shù)據(jù)(子組件接收數(shù)據(jù))
第一種方式(只接收)
簡單的聲明接收
props:['name','sex','age']?
第二種方式(限制類型)
接收的同時對數(shù)據(jù)進行類型限制
?props:{ ? ? ? ? ? ?name:String, ? ? ? ? ? ?age:Number, ? ? ? ? ? ?sex:String ? ? ? ? ?}?
第三種方式(限制類型、限制必要性、指定默認值)
接收數(shù)據(jù)的同時:進行類型數(shù)據(jù)限制+默認值+必要性的限制
?? ?props:{ ? ? ? ? ? ? ? ? name:{ ? ? ? ? ? ? ? ? ? ? type:String, //name的類型是字符串 ? ? ? ? ? ? ? ? ? ? required:true //name是必要的 ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? ? ? age:{ ? ? ? ? ? ? ? ? ? ? type:Number, ? ? ? ? ? ? ? ? ? ? default:99 //默認值 ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? ? ? sex:{ ? ? ? ? ? ? ? ? ? ? type:String, ? ? ? ? ? ? ? ? ? ? required:true ? ? ? ? ? ? ? ? } ? ? ? ? ? ? }
備注:props是只讀的,Vue底層會檢測你對props的修改,如果進行了修改。就會發(fā)出警告,
若業(yè)務需求確實需要修改,那么請賦值props的內容到data中一份,然后去修改data中的數(shù)據(jù)
以上為個人經驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
vue中提示$index is not defined錯誤的解決方式
這篇文章主要介紹了vue中提示$index is not defined錯誤的解決方式,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09