[英]Proper way to override properties and methods in Vue.js?
在 Vue.js 中使用mixins覆盖方法的正确方法是什么? 我知道您可以使用 mixins 模拟继承,但是假设您想要扩展一些道具但不完全覆盖整个道具值。
例如,我有一个 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 道具,但传递了对象中的一些定义的道具。
在 Vue > 2.2 中,您可以使用自定义选项合并策略来实现您想要的。 请注意,该策略适用于所有 mixin。
可以在文档中找到一个示例: https ://v2.vuejs.org/v2/guide/mixins.html#Custom-Option-Merge-Strategies
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.