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.
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.
FnChild does't need to use inject: ['$validator'] at allFnChild render functioninject: ['$validator'] in your Target async componentCheck 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.