如何设置 Object prop 的嵌套属性的默认值？
显然，只有当第一级 Object prop 是 undefined 时，Vue 才会解析嵌套属性的默认值。
例子：
Vue.component('example', {
props: {
options: {
type: Object,
default: function() {
return {
nested: {
type: Object,
default: function(){
return 'default value'
}
}
}
}
}
})
【问题讨论】：
显然，Vue 解析嵌套属性的默认值只有在 第一级 Object 属性不是未定义的。
是的，这是有道理的，因为如果您没有外部对象，您将无法拥有内部或嵌套属性。
所以我认为它更具可读性，只需将{} 设置为第一级对象的默认对象，您应该针对 undefined 或 null 进行自己的防御性验证>，就像下面的例子：
<script>
export default {
props: {
option: {
type: Object,
default: () => {},
required: false
}
},
computed: {
optionReceived: function () {
const defaultNestedValue = 'Some default value'
const option = this.option.nested || defaultNestedValue;
return option;
}
}
}
</script>
【讨论】：
<example><example> options.nested 的值设置为默认值。但是传递一个部分 option 属性：让 options = {} <example :options=options><example> 部分选项对象没有与嵌套属性的默认值合并。
{} 传递给组件并且未设置 default value 时，因为空对象是真实值。看看这个developer.mozilla.org/en-US/docs/Glossary/Truthy
我认为让您的数据结构易于使用且尽可能平坦总是更好。因为 Vue 中的嵌套 props 从来都不是一个好的选择。
假设你在你的Vue组件中提到的options里面有很多属性。
例子：
props: {
options: {
bookAttributes: {
colorAttributes: { coverColor: 'red', ribbonColor: 'green' },
sizeAttributes: { coverSize: 10, ribbonSize: 2 },
...
}
}
}
你可以把它们弄平以便更好地理解。
props: {
coverSize: 10,
coverColor: 'red',
ribbonColor: 'green,
ribbonSize: 2 ...
}
然后您和您的同事就可以像这样愉快地使用您的组件了：
<your-component>
coverSize="15"
coverColor="blue"
ribbonColor="red"
ribbonSize="3"
</your-component>
祝你好运，祝你好运。
【讨论】：