使用默认值合并 Vue 道具

Question

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

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

如果将选项对象作为 prop 传递给组件，默认值将被替换。例如，当传递 { 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 传递的属性。不知道这是否是最有效的方法，但它非常易于理解且简洁:)

因此，如果您作为 props :options={someOption:true} 传入，合并后的选项将等同于：

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

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

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

Answer 2

您实际上永远不想修改组件内的道具。如果这样做，您会破坏 parent/child 组件的单向数据流，并且您的代码将很难推断出什么正在影响什么。

直接从 Vue 文档中提取，正确的解决方案是 (1) 使用初始 prop 或 (2) 计算值，因此您的应用程序可以响应并尊重父组件，您可以高枕无忧踢起你的脚:)

两种解决方案都假定您的模板将使用 opts 作为选项...

解决方案 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
  }
}

一个快速的思考实验会表明，如果父组件更改了您的输入道具，您的组件可以正确地做出反应。

使用默认值合并 Vue 道具

Merge Vue props with default values

javascript

vue.js

vue-component