This example shares the specific code for component props data verification for your reference. The specific content is as follows
Data Verification
Generally, when components need to be provided to others for use, data verification is required.
Example:
<script>
('my-component',{
props:{
// Must be a numeric type propA: Number,
// Must be a string or numeric type propB:[String, Number],
//Boolean value, if not defined, the default value is true propC:{
type: Boolean,
default: true
},
//Number, and it is a must propD: {
type: Number,
required: true
},
//If it is an array or object, the default value must be a function to return propE: {
type: Array,
default: function () {
return {};
}
},
//Custom verification function propF: {
viladator: function (value) {
return value > 10;
}
}
}
});
</script>
The type of verification can be:
- String
- Number
- Boolean
- Object
- Array
- Function
type can also be a custom constructor that uses instanceof detection. When prop verification fails, a warning will be thrown in the console under the development version.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="/vue/dist/"></script>
<title>Components：Parameter verification</title>
</head>
<body>
<!--为Components中接受到的变量进行逻辑验证-->
<div >
<h1>Mystery of life experience</h1>
<show-member-info name="koma" :age="25" :detail="{address:'earth',language:'Esperanto'}"></show-member-info>
</div>
<script>
('show-member-info',{
props: {
name: {
type: String,//type required: true,//Required, if not selected, report error },
age: {
type: Number,
validator: function (value) {
return value >= 0 && value <=130;
}
},
detail: {
type: Object,
default: function () {
return {
address: 'US',
language: 'English'
};
}
}
},
template: '<div>Name：{{}}<br/>'
+ 'age：{{}}age<br/>'
+ 'address：{{}}<br/>'
+ 'language：{{}}</div>'
});
var myApp = new Vue({
el: '#myApp'
});
</script>
</body>
</html>
For more tutorials, click "Front-end component learning tutorial》, everyone is welcome to learn and read.
Regarding the tutorial on components, please click on the topicComponent learning tutorialCarry out learning.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.