Solve the problem of how to use the default attribute of the vue prop value and why it does not take effect

If the displayed prop property is called in the template, the default property will not take effect

If the prop property is not called in the template, the default will take effect

Whether the default value is valid or not has nothing to do with whether the verification of prop is passed or not.

//statement("blog-post", {
 props: {
  postTitle: {
   type: Number,
   default: 10000
  }
 },
 template: "<h3>{{ postTitle }}</h3>"
});
//In template, the prop attribute is displayed, and the default does not take effect<blog-post :postTitle="54"></blog-post>
//In template, the prop attribute is not called, the default takes effect<blog-post></blog-post>

Supplementary knowledge:vue prop sets default values ​​for different data types (arrays, objects..)

vue prop will receive different data types. Here is a list of common data types to set default values, 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: () => ({})
}

The above article solves the problem of how to use the default attribute of the vue prop value and why it does not take effect is all the content I have shared with you. I hope you can give you a reference and I hope you can support me more.