使用 mixins 覆盖方法的正确方法是什么?在 Vue.js 中?我知道您可以使用 mixins 模拟继承,但假设您想要扩展一些 props 但不完全覆盖整个 prop 值。
例如,我有一个 baseCell,但我还需要具有与 <td>
相似但功能不同的组件s 和 <th>
s,所以我创建了两个使用 baseCell 作为混合的附加组件。
var baseCell = {
...
props: {
...
initWrapper: {
type: String,
default: 'td'
},
...
},
methods: {..}
};
在组件中设置 Prop 将完全覆盖所有值。
Vue.component('tableHeader', {
mixins: [baseCell],
props: {
initWrapper: {
default: 'th'
}
}
}
我想出了一个合并属性的解决方案,但它看起来有点老套,我不确定是否有更好的解决方案。
Vue.component('tableHeader', {
mixins: [baseCell],
props: Object.assign({}, baseCell.props, {
initWrapper: {
default: 'th'
}
})
});
有了这个,我保留了 baseCell Prop ,但传递了对象中的一些定义的 Prop 。
最佳答案
在 Vue > 2.2 中,您可以使用自定义选项合并策略来实现您想要的。请注意,该策略适用于所有混合。
可以在文档中找到示例: https://v2.vuejs.org/v2/guide/mixins.html#Custom-Option-Merge-Strategies
关于javascript - 在 Vue.js 中覆盖属性和方法的正确方法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40639128/