Vue - provide/inject应用

Posted on   |   In

官方文档

provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。在该对象中你可以使用 ES2015 Symbols 作为 key，但是只在原生支持 Symbol 和 Reflect.ownKeys 的环境下可工作。

inject 选项应该是：

一个字符串数组，或
一个对象，对象的 key 是本地的绑定名，value 是：
在可用的注入内容中搜索用的 key (字符串或 Symbol)，或
一个对象，该对象的：
from 属性是在可用的注入内容中搜索用的 key (字符串或 Symbol)
default 属性是降级情况下使用的 value

drawer 组件中应用

repo: https://github.com/dreambo8563/vue-simple-drawer

解析

这个组件有个能力就是嵌套, drawer 里面嵌套 drawer. 这个时候需要 z-index 属性能够自动的递增上去
这中间包 modal 层的 z-index

这样的情况下,我想到了 provide/inject

  • 用户可以通过 zIndex prop 传入自定义的 index
  • 当前实际的 zIndex 是两部分获得
 computedIndex() {
      return this.zIndex || this.simpleDrawerIndex;
}

simpleDrawerIndex 就是注入进来的 zIndex

  • 如果用户没设置就用注入的

注入且设置默认值(最外层不会被任何祖先注入,所以必须有默认值)

inject: {
   simpleDrawerIndex: { default: 1000 }
 },

开始注入:

provide() {
    return {
      simpleDrawerIndex: this.computedIndex + 1
    };
  },

这里注入的值要比当前 drawer 的值 +1 也就是 “递增”

易错点

当开始用的时候,总是感觉要死循环了, 其实就是注入值的默认值问题.
子组件肯定有注入值, 根组件不一定有