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.