Article directory
1 props validation
Props verification refers to verifying the validity of the props data passed from the outside world when encapsulating components, so as to prevent the problem of illegal data.
Disadvantage of using an array-typed props node : You cannot specify a specific data type for each prop.
2 props node of object type
Using the props node of the object type, you can check the data type of each prop
// props: ['count', 'state'],
props: {
count: {
type: Number
},
state: Boolean
}
<template>
<div>
<p>数量：{
{ count }}</p>
<p>状态：{
{ state }}</p>
</div>
</template>
<script>
export default {
name: 'MyCount',
// props: ['count', 'state'],
props: {
count: {
type: Number
},
state: Boolean
}
}
</script>
<style lang="less" scoped></style>
3 props validation
The props node of the object type provides a variety of data validation schemes.
① Basic type checking
② Multiple possible types
③ Mandatory item verification
④ Attribute default value
⑤ Custom validation function
4 Basic type checking
The underlying validation type can be specified directly for a component's prop property, preventing consumers of the component from binding the wrong type of data to it.
4.1 Basic types that support validation
String
Number
Boolean
Array
Object
Date
Function
Symbol
5 more possible types
If the type of a prop property value is not unique, you can specify multiple possible types for it in the form of an array
The value of info may be a string or a number
info: [String, Number]
<template>
<div>
<p>数量：{
{ count }}</p>
<p>状态：{
{ state }}</p>
</div>
</template>
<script>
export default {
name: 'MyCount',
// props: ['count', 'state'],
props: {
count: {
type: Number
},
state: Boolean,
info: [String, Number]
},
}
</script>
<style lang="less" scoped></style>
6 Required fields check
If a prop property of a component is required, you must let the consumer of the component pass it the value of the property.
It can be set as required:
count: {
type: Number,
required: true //count属性的值必须有
},
<template>
<div>
<p>数量：{
{ count }}</p>
<p>状态：{
{ state }}</p>
</div>
</template>
<script>
export default {
name: 'MyCount',
// props: ['count', 'state'],
props: {
count: {
type: Number,
required: true
},
state: Boolean,
info: [String, Number]
},
}
</script>
<style lang="less" scoped></style>
7 Property Default Values
When wrapping a component, you can specify a default value for a prop property.
count: {
type: Number,
required: true,
default: 100 //如果没有传值，count默认为100
},
<template>
<div>
<p>数量：{
{ count }}</p>
<p>状态：{
{ state }}</p>
</div>
</template>
<script>
export default {
name: 'MyCount',
// props: ['count', 'state'],
props: {
count: {
type: Number,
required: true,
default: 100
},
state: Boolean,
info: [String, Number]
},
}
</script>
<style lang="less" scoped></style>
8 Custom Validation Functions
When encapsulating a component, you can specify a custom validation function for the prop property, allowing more precise control over the value of the prop property.
The type attribute is verified by the validator function, the value is the value passed to the type, and the value of the type is one of the arrays. A return value of true in the array indicates that the verification is passed, otherwise the verification fails.
type: {
validator(value) {
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
<template>
<div>
<p>数量：{
{ count }}</p>
<p>状态：{
{ state }}</p>
</div>
</template>
<script>
export default {
name: 'MyCount',
// props: ['count', 'state'],
props: {
count: {
type: Number,
required: true,
default: 100
},
state: Boolean,
info: [String, Number],
type: {
validator(value) {
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
},
}
</script>
<style lang="less" scoped></style>