当前位置: 首页 > Web前端 > vue.js

vue父子组件数据传递props如何设置Object和Array的默认值

时间:2023-04-01 11:00:07 vue.js

< titlesplit >vue中父子组件进行数据传递,使用props将父组件的数据传递给子组件成分。我们知道可以使用两种写法:第一种是使用数组的方式,例如:props:['list','nameObj']这种方式,我们无法知道传递的数据类型,以及复杂的项目使用起来不是那么方便方便。第二种是使用对象的方式,表示传递的数据类型和默认值。例如:props:{field:{type:String},index:{type:Number,default:0},isAble:{type:Boolean,default:true},rowData:{type:Object,default:function(){返回{};}},btnArr:{类型:数组,默认:function(){return[];}}}这个方法一目了然,所以项目中经常使用这个方法进行数据传输。对于简单的数据类型,直接列出数据类型和默认值(default)。对于复杂数据类型Object和Array,在设置默认值时,需要通过函数返回。下面两种方法都是正确的:rowData:{type:Object,default(){return{}}}rowData:{type:Object,default:function(){return{}}}特别注意,不能简化这里的箭头函数://这种写法是错误的//当父组件没有传这个值或者值为空的时候,如果输出了,这时候会返回underfind,而当获取到里面的值时模板,会报错rowData:{type:Object,default:()=>{}}