vue组件调用另外一个组件中的方法

在项目中，我们可能碰到这样的需求：在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看看哦