在項(xiàng)目中遗座,我們可能碰到這樣的需求:在vue組件中調(diào)用另外一個(gè)組件中的方法,讓其執(zhí)行對(duì)應(yīng)的函數(shù)从诲,下面是我總結(jié)的一些方法,不足之處希望訂正謝謝靡羡。
一:如果是父子關(guān)系的話系洛,我們可以使用下面的辦法
console.log(this.$children) //我們可以打印一下看看
this.$children[1].fn() //我們可以這樣執(zhí)行 fn是函數(shù)名字
二:如果結(jié)構(gòu)比較復(fù)雜,或者不能確定children
的下標(biāo)略步。我們可以使用下面的辦法
1描扯、 首先在被調(diào)用的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趟薄、在需要調(diào)用的組件中調(diào)用即可
this.pageFunction[fn]()
以上方法是在vue2中測(cè)試绽诚,vue3中可以試著打印一下this看看哦