vue props的Object类型中default值, 未传值的属性不存在但是已经提供了默认值
时间: 2024-02-28 15:52:49 浏览: 136
Vue props中Object和Array设置默认值操作
当在 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。
阅读全文