在 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 道具,但传递了对象中的一些定义的道具。