vue组件props不同数据类型传参的默认值问题
作者：baby加油_
这篇文章主要介绍了vue组件props不同数据类型传参的默认值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue组件props不同数据类型传参的默认值
vue prop 会接收不同的数据类型，这里列出了 常用的数据类型的设置默认值的写法
其中包含： Number, String, Boolean, Array, Object , Function
//数值型
num: {
type: Number,
default: 0
},
//字符串
name: {
type: String,
default: ''
},
//布尔值
dataLoading: {
type: Boolean,
default: false
},
//数组
list: {
type: Array,
default: () => {
return []
}
},
//对象
obj: {
type: Object,
default: () => ({})
},
//方法
getParams: {
type: Function,
default: () => () => {}
}
vue props 多类型
在Vue中，props是一种使用场景广泛的属性。它可以让子组件接收父组件传递的值，从而实现组件之间的通讯。
除了常见的使用props属性来设置值之外，Vue还提供了props多类型支持，这意味着在设置props时，可以定义多种类型，从而为组件开发提供更大的灵活性。
props: {
propA: [String, Number],
propB: {
type: [String, Number],
default: 100
},
propC: {
type: [String, Number],
required: true
},
propD: {
type: [Object, Array],
default: function () {
return []
}
}
}propA和propB都设置了多个类型。
- 在给这些属性设置值时，它们可以是字符串或数字类型。
- 也可以通过type属性来指定属性的类型。
- propB还设置了默认值为100。
propC和propD都通过对象的形式进行定义。
- propC是必须传入的且类型必须为String或Number。
- propD的类型可以是Object或Array类型，如果没有传值，则默认为一个空数组。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。