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

Question

What is the correct way to override methods using mixins in Vue.js? I know that you can mock inheritance with mixins, but let them say that you want to expand some details, but not completely override the whole value of prop.

For example, I have baseCell, but I also need to have components that are similar, but work differently for <td>and <th>s, so I create two additional components that use baseCell as mixin.

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

In the component settings, props as such completely override all values.

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

I came up with a solution to merge properties, but it seems like a hack, and I'm not sure if there is a better solution.

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

baseCell, .

Answer 1

Vue > 2.2 . , .

: https://vuejs.org/v2/guide/mixins.html#Custom-Option-Merge-Strategies