如何提供从 vue 功能组件传递的注入

Question

树：

<Parent>
  <FnChild>
    <Target />
  </FnChild>
</Parent>

我有 Parent 提供的 $validator。在 FnChild 中，我将渲染函数与其他异步组件 (Target) 一起使用。

  inject: ['$validator'],
  render: (h, context) => {
    return h(Target, context.data, context.children)
  }

注入存在于 context.injections 中，但如何使用功能组件将其传递给 Target？

我只能想象将 FnChild 重写为 non-functional 组件并在 FnChild

中使用 provide: ['$validator']

UPD：正如答案中所指出的，您不需要任何 inject/provide 内部功能组件，它就可以工作。

我的具体案例与每个组件中新 $validator 的 v-validate 和 auto-injection 有关。在我的具体情况下，它是一个带槽的组件，它覆盖了 $validator，因为我里面没有 inject: ['$validator']。结构很简单，像这样：

Parent

<ComponentWithSlot>
  <FnChild slot='my-slot' />
</ComponentWithSlot>

Parent 注入了验证器，但 ComponentWithSlot 没有，因此 v-validate 为 ComponentWithSlot 重新创建了新实例，并提供给 FnChild 而不是 $validator 来自 Parent组件。

所以一旦我将 inject: ['$validator'] 添加到 ComponentWithSlot 中，一切都很好并且 Target 现在可以正确地从 Parent.[=30 接收 $validator =]

Answer 1

provide/inject API 专门设计用于：

allow an ancestor component to serve as a dependency injector for all its descendants, regardless of how deep the component hierarchy is, as long as they are in the same parent chain.

FnChild 根本不需要使用 inject: ['$validator']
无需在 FnChild 渲染函数中传递与注入相关的任何内容
只需在 Target 异步组件中使用 inject: ['$validator']

勾选这个simple example

provide and inject are primarily provided for advanced plugin / component library use cases. It is NOT recommended to use them in generic application code.

如何提供从 vue 功能组件传递的注入

How to provide passed injection from vue functional component

vue.js

vue-component

vuejs2

vue-render-function