Question

在Vue.js中使用mixins覆盖方法的正确方法是什么？我知道你能够使用mixins来模拟继承，但是让我们说你想扩展一些道具但不能完全覆盖整个道具价值。

例如我有一个baseCell，但是我还需要有类似的组件，但<td>和<th>的功能不同，所以我创建了两个使用baseCell的附加组件混合。

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

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

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

我已经提出了合并属性的解决方案，但它看起来有点hacky，我不确定是否有更好的解决方案。

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

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

Answer 1

在Vue＆gt; 2.2你可以使用自定义选项合并策略来实现你想要的。请注意，该策略适用于所有mixins。

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

在Vue.js中覆盖属性和方法的正确方法是什么？

1 个答案: