将 Vue 道具与默认值合并

Question

我的 Vue 组件中有一个具有默认值的选项道具。

export default {
  props: {
    options: {
      required: false,
      type: Object,
      default: () => ({
        someOption: false,
        someOtherOption: {
          a: true,
          b: false,
        },
      }),
    },
  },
};

如果将选项对象作为属性传递给组件，则会替换默认值。例如，当传递{ someOption: true } 时，现在选项对象仅包含该值。

如何传递部分对象并用给定值覆盖默认值，而不是替换整个对象？

Answer 1

我最近遇到了类似的问题并使用了Object.assign这是来自Mozilla https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign 的文档

您的案例的具体用法是这样的：

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 传递的属性。不知道这是否是最有效的方法，但它非常易于理解和整洁:)

因此，如果您作为道具传入:options={someOption:true}则合并的选项将等效于：

{
 someOption: true,
 someOtherOption: {
  a: true,
  b: false,
 },
}

编辑：如果您需要数据是反应性的，您可能需要计算。

  computed: {
    mergedOptions(){
      return {
       ...this.defaultOptions,
       ...this.options
      }
    }
  }

Answer 2

实际上，

您永远不会想要修改组件中的 props。如果这样做，则会中断父/子组件的单向数据流，并且您的代码将很难推理出影响什么。

从 Vue 文档中直接提取，正确的解决方案是 （1） 使用初始 prop 或 （2） 计算值，这样你的应用程序就可以被动并尊重父组件，你可以高枕无忧，把脚踢起来:)

这两种解决方案都假设您的模板将使用选项...

解决方案 1：使用初始属性（默认值和选项）：

props: ['options', 'defaults'],
data: function () {
  var opts = {}
  Object.assign(opts, this.defaults, this.options)
  return { 
    opts: opts
  }
}

解决方案 2：定义计算属性，以便组件可以对 prop 更改做出反应：

props: ['options', 'defaults'],
computed: {
  opts: function () {
    let opts = {}
    Object.assign(opts, this.defaults, this.options)
    return opts
  }
}

快速思考实验将显示，如果父组件更改了您的输入道具，您的组件可以做出适当的反应。