vue props的Object类型中default值, 未传值的属性不存在但是已经提供了默认值
时间: 2024-02-28 11:52:49 浏览: 15
当在 Vue 中使用 props 的 Object 类型时,如果没有传入某个属性,那么该属性在组件实例中会被设置为 undefined。如果你为该属性提供了默认值,那么该属性会被设置为该默认值。
例如,假设你有如下的 props 定义:
```
props: {
myObject: {
type: Object,
default: { foo: 'bar' }
}
}
```
如果你在使用该组件时没有传入 `myObject` 属性,那么 `this.myObject` 会被设置为 `{ foo: 'bar' }`。如果你传入了 `myObject` 属性,那么 `this.myObject` 会被设置为传入的值。
需要注意的是,如果你想让未传入的属性不存在,而不是被设置为 undefined,可以使用 ES6 的解构赋值默认值来实现:
```
props: {
myObject: {
type: Object,
default: () => ({ foo: 'bar' })
}
},
data() {
return {
object: { ...this.myObject }
}
}
```
这样,如果你没有传入 `myObject` 属性,`this.object` 就会被设置为 `{ foo: 'bar' }`,而不是 undefined。
相关问题
vue props 传object默认值
在Vue中,你可以为props的默认值传递一个对象。例如,你可以这样定义一个带有默认值的对象类型的prop:
props: {
fieldObject: {
type: Object,
default: () => ({})
}
}
在这个例子中,fieldObject是一个对象类型的prop,它的默认值是一个空对象。你可以在组件中使用这个prop,并且如果没有传递任何值,它将使用默认的空对象作为值。
#### 引用[.reference_title]
- *1* *3* [vue组件中props类型及默认值](https://blog.csdn.net/Misnice/article/details/122157348)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [vue组件传值prop类型](https://blog.csdn.net/weixin_42265852/article/details/89854009)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]
vue props 对象类型默认值格式
Vue props 对象类型默认值格式如下所示:
```javascript
props: {
fieldObject: {
type: Object,
default: function() {
return {};
}
}
}
```
需要注意的是,当默认值为对象时,不能写成以下形式:
```javascript
testObject: {
type: Object,
default: () => {}
}
```
因为箭头函数会绑定父级作用域,而不是组件实例,这会导致在多个实例之间共享默认值。