如何从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重写为非功能性组件，并在provide: ['$validator']中使用FnChild

UPD ：正如答案中指出的那样，您不需要在功能组件内部进行任何注入/提供操作，它就可以正常工作。

我的具体情况与每个组件中的v-validate和新$validator的自动注入有关。在我的特定情况下，它是一个带有插槽的组件，它覆盖了$validator，因为其中没有inject: ['$validator']。结构很简单，就像这样：

父母

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

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

因此，一旦我将inject: ['$validator']添加到ComponentWithSlot，一切都很好，并且Target现在可以正确地从$validator收到Parent。

Answer 1

provide/inject API专门用于：

  

允许祖先组件为其所有后代充当依赖项注入器，而不管组件层次结构有多深，只要它们在同一父链中即可。

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

选中此simple example

  

提供和注入主要用于高级插件/组件库用例。 不建议在通用应用程序代码中使用它们。