Calling $parent from an async component.

[grey-dev-0]

A component loaded asynchronously is automatically wrapped by an AsyncComponentWrapper so, calling $parent from within that component gets the wrapper instead of the true parent of the component, is there a way to get the true parent of a component in this case?

Example of the issue:

Component A
    AsyncComponentWrapper
        Component B

Calling $parent.method() from Component B throws an error because, method is defined in Component A and not in the wrapper of Component B obviously so, if $parent somehow bypasses the wrapper and gets the real parent this call would work as usual.

I know it's discouraged to call parent methods directly this way - and going by $emit instead is - but, the former way is straightforward, this also applies to parent's data too.

[grey-dev-0]

Alright, I'll answer my own question in hopes for other backend developers intruding into frontend community - like myself - to find the answer, long story short the answer is not by $emitting events, the answer is by using provide in components higher in the hierarchy and, inject in their descendant components like documented here.

Thus you can directly access ancestor components' data, props and, methods without worrying about other components taking place in between like the AsyncComponentWrapper mentioned in this questions, there are some caveats to look out for but, all is documented in the mentioned reference.