我的Vue组件中有一个带有默认值的选项props .
export default {
props: {
options: {
required: false,
type: Object,
default: () => ({
someOption: false,
someOtherOption: {
a: true,
b: false,
},
}),
},
},
};
如果选项对象作为props 传递给零部件，则会替换默认值.例如，当超过{ someOption: true }时，options对象现在只包含该值.
如何传递部分对象并用给定值覆盖默认值，而不是替换整个对象？
我最近遇到了类似的问题，使用了Object.assign
您的 case 的具体用法如下:
props: {
options: {
required: false,
type: Object,
default: () => ({}),
},
},
data(){
mergedOptions:{},
defaultOptions:{
someOption: false,
someOtherOption: {
a: true,
b: false,
},
}
},
mounted(){
//you will have the combined options inside mergedOptions
Object.assign(this.mergedOptions,this.defaultOptions,this.options)
}
通过这样做，您将只覆盖通过props 传递的属性.不知道这是否是最有效的方法，但它非常容易理解和整洁:)
因此，如果你以props :options={someOption:true}的身份进入，合并的选项将相当于:
{
someOption: true,
someOtherOption: {
a: true,
b: false,
},
}
编辑:如果你需要你的数据是react 性的，你可能需要一个计算的.
computed: {
mergedOptions(){
return {
...this.defaultOptions,
...this.options
}
}
}