props的语法
1、数组语法
props: ['size', 'myMessage'] //不限制数据类型
2、对象语法 (注意事项已在注释中说明)
props: {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
propA: Number,
// 多个可能的类型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true,
},
// 带有默认值的数字
propD: {
type: Number,
default: 100,//基本类型可直接写默认值
//default: () => 100, //箭头函数写法
},
// 具有默认值的数组写法
propK: {
type: Array,
// 对象或数组默认值必须从一个工厂函数获取
default: function () {
return ["张三"];
},
//default: () => ([]) //箭头函数写法
},
// 带有默认值的对象
propE: {
type: Object,
// 对象或数组默认值必须从一个工厂函数获取
default: function () {
return { message: "hello" };
},
//default: () => ({}) //不能直接返回{},这是function类型的写法
},
//带有默认方法function
propG: {
type: Function,
default: () => {} //function类型的写法
},
// 自定义验证函数
propF: {
validator: function (value) {
// 这个值必须匹配下列字符串中的一个
return ["success", "warning", "danger"].indexOf(value) !== -1;
},
},
},
踩坑记录
用data中的变量,为props赋默认值,尝试多种方法都失败。父组件未向子组件传参数arrList的情况下,一直获取不到default的值。
props:{
arrList:{
type:Array,
default:() => (this.demoArr)
}},
data(){
return{
demoArr:[
{title:"This is 01 title",price:"100",img:require('@/assets/example-pic/examplePic01.png')},]}
</div>
原因:prop 会在一个组件实例创建之前进行验证,所以实例的属性 (如 data、computed 等) 在 default 或 validator 函数中是不可用的。
简单的说就是在 props-default里面无法引用到 data的数据,所以修改的时候要把data数据复制到default处。同时也要注意用一个工厂函数去返回数组或者对象
props{
arrList:{
type:[Array,Object],
default:() => ([
{x=...,y=....}
{.....}
])
}
}