vue props data delivery type limitation
1. The first type: No restriction on any data
props: ['test', 'test1'],
2. The second type: only restrict data types
props: {
test: String,
test1: Number
}, 3. The third type: restrict data types, necessary parameters, default values
props: {
test: {
type: String, // Character type required: true // Necessary conditions },
test1: {
type: Number, // Character type default: 99 // default value },
},Configuration item props in Vue
Function: Let the component receive data passed from outside and pass data to subcomponents
(1). Pass data (the parent component passes data)
< Student name="Li Si" :age="18" sex="female"/>
(2). Receive data (subcomponents receive data)
The first method (receive only)
Simple declaration reception
props:['name','sex','age']
The second method (restricted type)
Type restrictions on data while receiving
props:{
name:String,
age:Number,
sex:String
} The third method (restriction type, restriction necessity, specifying default value)
While receiving data: type data limit + default value + necessity limit
props:{
name:{
type:String, //The type of name is a string required:true //name is necessary },
age:{
type:Number,
default:99 //default value },
sex:{
type:String,
required:true
}
}Note: props are read-only, and the Vue underlying layer will detect your modifications to props, if they are modified. A warning will be issued.
If the business requirements really need to be modified, please assign the content of props to a copy of the data, and then modify the data in the data.
The above is personal experience. I hope you can give you a reference and I hope you can support me more.