Update
integrate codePen into the project.
https://codepen.io/jiaxi0331/pen/xxVZBMz
Description
encountered an issue while trying to call the parent method recursively
Code
export default {
methods: {
dispatch(componentName, event, value) {
if (this.$options.name === componentName) {
this.$emit(event, value);
} else {
const parent = this.$parent || this.$root;
return this.dispatch.call(parent, componentName, event, value); // Error. call this.dispatch in component.
}
}
// broadcast(componentName, event, value) {}
},
};
Expect && Detail Error
dispatch.call(parent) -> parent.dispatch.call(parent.parent) -> parent.parent.dispatch...
Detail error：
Error in v-on handler: "RangeError: Maximum call stack size exceeded"Version
vue 2.6.1
Try
function dispatch(componentName, event, value) {
if (this.$options.name === componentName) {
this.$emit(event, value);
} else {
const parent = this.$parent || this.$root;
return dispatch.call(parent, componentName, event, value);
}
}
export default {
methods: {
dispatch(componentName, event, value) {
dispatch.call(this, componentName, event, value);
}
// broadcast(componentName, event, value) {}
}
};
The workaround was successful. It was discovered that using dispatch.call(this.$parent) altered the 'this' object, leading to the failure of this.dispatch.call(this.$parent).