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: () => ({})
}

Related articles: