Type of the default value for ‘propsTree’ prop must be a function
今天在运行项目时候发现有报错信息,心里很难受,怎么可以有红。
环境:
vue cli 3.0初始化带有eslint项目
触发位置:
组件的props内部
思考:
之前没怎么用eslint,也很少用到设置默认值,因此没有发现这样的问题。
...
props: {
treeData: {
type: Array,
default: []
},
propsTree: {
default: {},
type: Object
},
}
...
propsTree
明明是需要一个对象,为什么还报错默认值是要一个方法,原需要的对象不能改变,又想要是方法,只能改成方法返回对象了。
...
props: {
treeData: {
type: Array,
default: () => []
},
propsTree: {
default: () => ({
children: 'children',
label: 'label'
}), // 返回对象要用()包裹,或者写成{return {...}}
type: Object
},
}
...
果然解决了!!!查找一番,发现vue官网教程示例里面有说要用方法但是没说原因。github上vue仓库有一个关于本问题的Issues。
根据我的理解,对象、数组的默认值需要使用工厂函数获取是因为:不使用的情况下,如果没有对对应的prop传参,组件使用了默认值,此时所有的组件实例会共用这个默认值,因此会产生很多问题,每一个组件实例不再是独立的一部分;使用之后可以保证每个组件实例的prop值都是独立的非共用的。