Is there a proper method for overriding methods using mixins in Vue.js? While it's possible to mimic inheritance with mixins, what if you only want to extend certain props without completely replacing the entire prop value?
For example, let's say I have a baseCell component, but I also need variations of this component for <td> and <th> elements. In this scenario, I create two additional components that utilize the baseCell as a mixin.
var baseCell = {
...
props: {
...
initWrapper: {
type: String,
default: 'td'
},
...
},
methods: {..}
};
When defining these components, setting the props will overwrite all values by default.
Vue.component('tableHeader', {
mixins: [baseCell],
props: {
initWrapper: {
default: 'th'
}
}
});
I've managed to come up with a solution that involves merging properties, but it feels somewhat like a workaround and I'm unsure if there is a more elegant solution available.
Vue.component('tableHeader', {
mixins: [baseCell],
props: Object.assign({}, baseCell.props, {
initWrapper: {
default: 'th'
}
})
});
This approach allows me to keep the baseCell props while adding the specific ones defined in the passed object.