Prop Validation and Non-Prop Attributes
# Prop Validation and Non-Prop Attributes
# Prop Validation
Child components can validate the parameters passed from parent components:
Vue.component('my-component', {
props: {
// Basic type check (`null` and `undefined` pass any type validation)
propA: Number,
// Multiple possible types
propB: [String, Number],
// Required string
propC: {
type: String,
required: true
},
// Number with a default value
propD: {
type: Number,
default: 100
},
// Object with a default value
propE: {
type: Object,
// Object or array defaults must be returned from a factory function
default: function () {
return { message: 'hello' }
}
},
// Custom validator function
propF: {
validator: function (value) {
// The value must match one of these strings
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
# Non-Prop Attributes
When a child component does not define a corresponding Prop to receive a value passed from the parent component, that value will appear as an Attribute on the component's root element.
# Use Case
For example, imagine you are using a third-party <bootstrap-date-input> component through a Bootstrap plugin, and this plugin requires a data-date-picker attribute on its <input>. We can add this attribute to the component instance:
<bootstrap-date-input data-date-picker="activated"></bootstrap-date-input>
1
Then the data-date-picker="activated" attribute will be automatically added to the root element of the <bootstrap-date-input> component.
Edit (opens new window)
Last Updated: 2026/03/21, 12:14:36