How to provide passed injection from vue functional component

Question

Tree:

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

I have $validator provided by Parent. Inside FnChild I use render function with other async component (Target).

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

injections live inside context.injections, but how to pass it down to the Target by using functional component?

I can imagine only rewriting of FnChild as non-functional component and using provide: ['$validator'] in FnChild

UPD: as was pointed in answers, you don't need any inject/provide inside functional component, it just works.

My specific case was related to v-validate and auto-injection of new $validator in each component. And in my specific case it was a component with slot, which was overriding $validator because I had no inject: ['$validator'] inside it. Structure is a simple like this:

Parent

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

Parent had validator injected, but ComponentWithSlot hadn't, so new instance was recreated by v-validate for ComponentWithSlot and it was provided down to the FnChild instead of $validator from Parent component.

So once I've added inject: ['$validator'] into ComponentWithSlot, everything is fine and Target now correctly receives $validator from Parent.

Answer 1

provide/inject API is specifically designed to:

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.

1. FnChild does't need to use inject: ['$validator'] at all
2. No need to pass anything related to injections in FnChild render function
3. Just use inject: ['$validator'] in your Target async component

Check this 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.