问题遇到的现象和发生背景
vue组件混入机制的methods与computed合并策略默认是覆盖型的,即:子混入有的则直接覆盖父级混入的,但现在需要在子混入中直接调用父级的混入原方法来实现对原处理逻辑的扩展,而不用重新实现父级的默认实现
众所周知,js的class类中可以用super关键字来实现这个需求,但奈何vue2是通过合并策略来实现合并的,无法使用super关键字
问题相关代码，请勿粘贴截图
const Parent = {
methods: {
test() {
console.log("我是父级方法")
}
}
}
const Child1 = {
mixins: [Parent]
methods: {
test() {
console.log("我是子级方法1")
}
}
}
const Child2 = {
mixins: [Parent]
methods: {
test() {
console.log("我是子级方法2")
}
}
}
new Vue({
mixins: [Child1, Child2]
});
我的解答思路和尝试过的方法
我自己花了时间想了以下方法,但都无法满足我的需求
- vue-super
vue-super是建立在使用Vue.extend()进行混入的组件,但是我的项目如代码那样,是直接通过.vue当文件来实现组件的混入机制的 - 更改默认合并策略
function setSuper(parent, child, vm, Vue) {
if (!_.isEmpty(parent) && !_.isEmpty(child)) {
_.forEach(child, (method, fname) => {
const parentMethod = parent[fname];
if (parentMethod) {
method.super = parentMethod;
}
});
}
}
function optionMergeStrategies(Vue) {
if (Vue.isMerge__) {
return;
}
const methods = Vue.config.optionMergeStrategies.methods;
const computed = Vue.config.optionMergeStrategies.computed;
Vue.config.optionMergeStrategies.methods = function(
parent,
child,
vm,
key
) {
setSuper(parent, child, vm, Vue);
return methods(parent, child, vm, key);
};
Vue.config.optionMergeStrategies.computed = function(
parent,
child,
vm,
key
) {
setSuper(parent, child, vm, Vue);
return computed(parent, child, vm, key);
};
Vue.isMerge__ = true;
}
- 使用父级对象的method.call调用父级
const Child = {
methods: {
test() {
Parent.methods.test.call(this);
// dosomething
}
}
}
该方法虽然可行, 但是混入多的话, 必须要知道当前的组件的上一个父级是谁
以上的方法会导致当Parent被复用混入时,method.super会被覆盖,调用时无法使用
我想要达到的结果
在子混入调用时直接使用super调用父级方法
const Child = {
methods: {
test() {
this.$super.test();
// dosomething
}
}
}
vue3用不了, 项目太大, 没有足够的时间去操作
