javascript - 在Vue.js中覆盖属性和方法的正确方法？

在Vue.js中使用mixins覆盖方法的正确方法是什么？我知道您可以使用mixins模拟继承，但是假设您要扩展一些 Prop ，但不完全覆盖整个 Prop 值。

例如，我有一个baseCell，但我还需要具有相似但组件对<td>和<th>不同的组件，因此我创建了两个使用baseCell作为mixin的附加组件。

var baseCell = {
  ...
  props: {
    ...
    initWrapper: {
      type: String,
      default: 'td'
    },
    ...
  },
  methods: {..}
};

在组件中设置 Prop 本身将完全覆盖所有值。

Vue.component('tableHeader', {
  mixins: [baseCell],
  props: {
    initWrapper: {
      default: 'th'
    }
  }
}

我想出了一种合并属性的解决方案，但似乎有点不客气，而且我不确定是否有更好的解决方案。

Vue.component('tableHeader', {
  mixins: [baseCell],
  props: Object.assign({}, baseCell.props, {
    initWrapper: {
      default: 'th'
    }
  })
});

这样，我保留了baseCell Prop ，但是在传递的对象中定义了一些 Prop 。

最佳答案

在Vue> 2.2中，您可以使用自定义选项合并策略来实现所需的功能。请注意，该策略适用于所有混合。

可以在文档中找到一个示例:
https://vuejs.org/v2/guide/mixins.html#Custom-Option-Merge-Strategies