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

海洋之蓝
  • 137

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

之前一直是爷爷级,就这样写了:

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

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

回复
阅读 640
5 个回答

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

蜗牛
  • 5
新手上路,请多包涵

给一个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中可以,也可以走广播

你知道吗?

宣传栏