vue component props default value issue for different data types passing parameters

vue component props default values ​​for argument transfers of different data types

vue prop will receive different data types, here is a list of common data types to set default values

It includes: Number, String, Boolean, Array, Object, Function

//Numericalnum: {
	type: Number,
	default: 0
},
//Stringname: {
	type: String,
	default: ''
},
//BooleandataLoading: {
	type: Boolean,
	default: false
},
//Arraylist: {
	type: Array,
	default: () => {
		return []
	}
},
//Objectobj: {
	type: Object,
	default: () => ({})
},
//methodgetParams: {
	type: Function,
	default: () => () => {}
}

vue props multi-type

In Vue, props are a property with a wide range of usage scenarios. It allows the child component to receive the values ​​passed by the parent component, thereby enabling communication between components.

In addition to the common use of props attributes to set values, Vue also provides multi-type support for props, which means that when setting props, multiple types can be defined, thus providing greater flexibility for component development.

props: {
propA: [String, Number],
propB: {
type: [String, Number],
default: 100
},
propC: {
type: [String, Number],
required: true
},
propD: {
type: [Object, Array],
default: function () {
return []
}
}
}

Both propA and propB have multiple types set.

• When setting values ​​for these properties, they can be strings or numeric types.
• You can also specify the type of the attribute through the type attribute.
• propB also sets the default value to 100.

Both propC and propD are defined in the form of objects.

• propC must be passed in and the type must be String or Number.
• The type of propD can be of Object or Array type, and if no value is passed, it defaults to an empty array.

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.