在项目中,我们可能碰到这样的需求:在vue组件中调用另外一个组件中的方法,让其执行对应的函数,下面是我总结的一些方法,不足之处希望订正谢谢。
一:如果是父子关系的话,我们可以使用下面的办法
console.log(this.$children) //我们可以打印一下看看
this.$children[1].fn() //我们可以这样执行 fn是函数名字
二:如果结构比较复杂,或者不能确定children
的下标。我们可以使用下面的办法
1、 首先在被调用的vue组件中把方法写入到vuex中( 下面的方法是吧vue组件中的所有方法都保存了)
mounted() {
let self = this;
this.$nextTick(() => {
let eventObj = {};
for (const selfItem in self) {
if (!selfItem.match(new RegExp("^[_\\$].*$"))) {
eventObj[selfItem] = self[selfItem];
}
}
this.$store.commit("setPageFunction", eventObj);
}
2、vuex中
mutations: {
setPageFunction(state, payload) {
state.pageFunction= payload
},
}
3、在需要调用的组件中调用即可
this.pageFunction[fn]()
以上方法是在vue2中测试,vue3中可以试着打印一下this看看哦