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

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看看哦

本文由 创作，采用 知识共享署名4.0 国际许可协议进行许可。本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名。最后编辑时间为: 2021/12/29 09:48