Injections resolve differently for functional components

[OEvgeny]

Version

2.5.13

Reproduction link

https://jsfiddle.net/ts7c6s1w/2/

Steps to reproduce

1. Open repro link
2. Verify component tree has the component which provides val
3. Verify that there are two components which inject val
4. Verify the output

What is expected?

Both the injector and the func-injector receive provided val.

What is actually happening?

Only injector receives provided val.

---

I didn't found any information about such behavior in docs. Looks like functional components resolve injections from functional context not parent component. Is it intended to work as it works now?

[LinusBorg]

This is an expected side effect of the way functional components work:

Since functional components don't have instances, they are immediatly evaluated in the parent's scope, and the generated vnodes are passed down as slot content to <provider>. That means the <func-injector> component has already run before <provider> has been rendered.

A normal component, like <injector>, is not immediatly rendered in the parent context - it's passed down to the <provider> as a component vnode, and will be rendered during <probider>s render cycle.

That's why the functional component can't inject the content provided by <provider>- it has already run before the content is provided.

This should indeed be documented more clearly, and not just in the context of provide/inject, but generally. Another side effect of this, for example, is that context.parent in the functional component it not <provider> - it's the main instance, in your example. Once again, the reason is that the functional component is being rendered in the parent's render cycle, not <provider>'s

Would you be so kind and open an issue about this in https://github.com/vuejs/vuejs.org/issues? The docs team can then take care of this.

We would of course also be open to a PR with a first shot of documenting this if you feel up for it.

[OEvgeny]

Another side effect of this, for example, is that context.parent in the functional component it not - it's the main instance, in your example.

Ah, I see. Thank you for the detailed response. Although I didn't expect such behavior mismatch. It would be great to update docs according to this. I've added a proposal though (see linked issue above).