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ù)

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: