Proper way to override properties and methods in Vue.js?

Question

What is the proper way to override methods using mixins in Vue.js? I know that you're able to mock inheritance using mixins, but let's say that you want to extend some props but not completely override the entire prop value.

For instance I have a baseCell, but I also need to have components that will be similar but function differently for <td>s and <th>s, so I create two additional components that use the baseCell as the mixin.

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

In the components setting the props as such will completely override all the values.

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

I've come up with a solution of merging the properties but it seems sort of hacky, and I'm not sure if there is a better solution.

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

With this, I retain the baseCell props, but some defined ones in the object passed.

Answer 1

In Vue > 2.2 you can use custom option merge strategies to achieve what you want. Note that the strategy applies to all mixins.

An example can be found here in the docu: https://v2.vuejs.org/v2/guide/mixins.html#Custom-Option-Merge-Strategies