6

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

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

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

在组件设置中，这样的道具将完全覆盖所有值。

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

我想出了一个合并属性的解决方案，但它似乎有点老套，我不确定是否有更好的解决方案。

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

有了这个，我保留了 baseCell 道具，但传递了对象中的一些定义的道具。

4

1 回答 1

0

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

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

于 2017-08-10T07:17:32.363 回答