问题
父组件 provide() {
return {
data: this,
}
}, 子组件inject: ['data'],如何调用父组件中的方法
是的,如果你在 provide
中没有使用别名,而直接使用 this
,子组件中可以通过直接使用 this
来访问父组件的方法。下面是修改后的示例:
// 父组件
provide() {
return {
data: this,
};
},
methods: {
hjm() {
// 父组件的方法逻辑
console.log("父组件的 hjm 方法被调用了");
}
}
在子组件中:
// 子组件
inject: ['data'],
methods: {
callParentMethod() {
// 直接调用父组件中的 hjm 方法
this.data.hjm();
}
}
在这个例子中,provide
中没有使用别名,所以子组件中可以通过 this.data
直接访问父组件的所有属性和方法,包括 hjm
方法。
在子组件中,你可以通过this.data
访问到父组件提供的data
对象,但你似乎想调用父组件的方法。为了实现这个需求,你需要在provide
的对象中暴露你想要在子组件中调用的方法。
例如,在父组件中:
// 父组件
export default {
provide() {
return {
data: this,
someMethod: this.someMethod.bind(this), // 曝露某个方法
};
},
methods: {
someMethod(arg1, arg2) {
// 这是父组件中的某个方法
console.log('Called from child component', arg1, arg2);
},
},
};
然后在子组件中:
// 子组件
export default {
inject: ['data', 'someMethod'],
mounted() {
this.someMethod('arg1', 'arg2'); // 调用父组件的方法
},
};
这样,你就可以在子组件中通过this.someMethod
来调用父组件暴露的someMethod
方法了。