vue 初步了解provide/inject

Posted 2021-11-22 feijiediyimei

provider/inject：简单的来说就是在父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量。

需要注意的是 provide / inject这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

 (这里不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据。)

eg：

 

父组件中提供
  provide() {
    return {
      map_nodeObj: { map_node: this.obj }
      // 提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。
    }
  },

 

子组件中引入
  inject: {
    map_nodeObj: {
      default: () => {
        return {map_node: ‘0‘}
      }
    }
  },
使用： this.map_nodeObj.map_node

 

 

运行顺序：

 

data
provide
created  // 在这个阶段$el还未生成，在这先处理privide的逻辑，子孙组件才可以取到inject的值
mounted
...

 

 

provide/inject的缺点：

 

这么做也是有明显的缺点的，在任意层级都能访问导致数据追踪比较困难，不知道是哪一个层级声明了这个或者不知道哪一层级或若干个层级使用了，因此这个属性通常并不建议使用能用vuex的使用vuex，不能用的多传参几层，但是在做组件库开发时，不对vuex进行依赖，且不知道用户使用环境的情况下可以很好的使用