VUE2组件调用父爷太级函数的疑问

  • Z时代
  • 2024-02-23
  • 分类：IT

VUE2组件调用父爷太级函数的疑问

用VUE2写了一个组件，这个组件最后需要调用使用这个组件的页面的函数。这个页面可能是这个组件的父辈，也可能是爷爷辈，也可能是太太辈.....

之前一直是爷爷级，就这样写了：

that.$parent.$parent.uploadimg(that.photo);

现在可能是太太级也可能是父亲级的调用，我该怎么写？

回答：

provide和inject可以解决，provide可以向所有子孙组件提供数据以及提供修改数据的方法，子孙组件用inject使用数据或方法

回答：

给一个elementUI源码中的方法，原理就是向上遍历查找对应的父级组件，找到对应的父级组件实例之后，调用其方法。
这个方法比较重要的一点就是根据componentName去查找，所以每个组件都必须要有该参数，当然也可以根据自己需求修改成其他对应的参数

  dispatch(componentName, eventName, params) {
      var parent = this.$parent || this.$root;
      var name = parent.$options.componentName;
      while (parent && (!name || name !== componentName)) {
        parent = parent.$parent;
        if (parent) {
          name = parent.$options.componentName;
        }
      }
      if (parent) {
//源码这边是触发其监听事件，可以根据自己的需求稍作修改，比如改成调用传入的方法名
//parent[eventName](params);
        parent.$emit.apply(parent, [eventName].concat(params));
      }
    },

回答：

自定义事件更适合吧

回答：

将方法抽离出来写在vuex中可以，也可以走广播

回答：

使用provide / inject，可以不受层级限制
官方文档链接

以上是 VUE2组件调用父爷太级函数的疑问 的全部内容， 来源链接： utcz.com/p/936224.html

回到顶部