Solve the problem of how to use the vue prop value passing default attribute and why it does not take effect
- 2021-08-28 07:09:37
- OfStack
If in template, the prop attribute is called, the default attribute will not take effect
If the prop property is not called in template, default will take effect
Whether the default value is valid or not has nothing to do with whether the prop verification is passed or not
// Declaration
Vue.component("blog-post", {
props: {
postTitle: {
type: Number,
default: 10000
}
},
template: "<h3>{{ postTitle }}</h3>"
});
// In template Displays the call to the prop Property, default Not effective
<blog-post :postTitle="54"></blog-post>
// In template Does not call the prop Property, default Effective
<blog-post></blog-post>
Additional knowledge: vue prop Set default values for different data types (arrays, objects, etc.)
vue prop will receive different data types. Here is a list of the default values for commonly used data types, including: Number, String, Boolean, Array, Function, Object
refAge: {
type: Number,
default: 0
},
refName: {
type: String,
default: ''
},
hotDataLoading: {
type: Boolean,
default: false
},
hotData: {
type: Array,
default: () => {
return []
}
},
getParams: {
type: Function,
default: () => () => {}
},
meta: {
type: Object,
default: () => ({})
}