依赖注入 (provide/inject)

用法

TIP

用法详见Vue文档

WARNING

这个API只能在组件内部使用

原理

provide

组件初始化时, 会取到父组件实例上的provides对象并放到当前组件上

provides: parentComponent ? parentComponent.provides : Object.create(null) // 储存依赖注入的值

---

调用provide时会把新增的属性放在当前组件的provides上

export function provide(key, value) {
  // 子用的是父 子提供了属性
  // 子提供的新属性应该和父亲没关系

  if (!currentInstance)
    return // 建立在组件基础上的
  const parentProvide = currentInstance.parent?.provides

  let provides = currentInstance.provides

  if (parentProvide === provides) {
    // 如果在子组件上新增了provides要拷贝一份全新的
    provides = currentInstance.provides = Object.create(provides)
  }

  provides[key] = value
}

inject

调用inject时会从当前组件的provides中取值 如果没有找到, 就返回传入的默认值

export function inject(key, defaultValue?) {
  if (!currentInstance)
    return
  const provides = currentInstance.parent?.provides

  if (provides && key in provides) {
    return provides[key] // 从provide中取出来使用
  }
  else {
    return defaultValue // 默认值
  }
}