VUE props的坑(Props with type Object/Array must use a factory function to return the default value)

GHUIJS

于 2021-09-04 16:23:08 发布

阅读量813

点赞数

分类专栏： vue2 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/m0_43599959/article/details/120098191

版权

vue2 专栏收录该内容

20 篇文章

订阅专栏

本文探讨了在Vue.js中遇到的一个警告，即对于数组和对象的默认值，应当使用工厂函数返回。作者解释了如何通过函数表达式正确地设置默认的prop值，包括使用箭头函数为Array、String、Number及Object定义默认值。示例代码展示了如何避免引用类型的默认值导致的问题，确保组件的健壮性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天在写父组件给子组件传值写默认值时报了这样一个警告：

// 数组／对象的默认值应当由一个工厂函数返回

研究半天只有默认值为引用类型报警告...

然后去百度了一下，应该这样写：

props:{
	data:{
		type:Object,
		default:function() {
			return {'name':'ghui'}
		}
	}
}

然后就自己想着写成箭头函数来着：

props:{
	list:{
		type:Array,
		default:() => [1,2,3,4,5]
	},
	name:{
		type:String,
		default:'ghui'
	},
	age:{
		type:Number,
		default:18
	},
//默认值为Object时要这样写
	obj:{
		type:Object,
		default:() => ({'name':'ghui'})
	}
}