Functional Components context.parent is root instance

Let’s say I have the following template:

<div id="app">
   <parent-component>
      <functional-child-component />
      <normal-child-component />
   </ parent-component>
</div>

If I use this.$parent inside the normal-child-component I get access to the parent-component, as expected.

If I use the same logic inside a functional child component, however, the behavior is different. context.parent gives me access to the root instance, similar to if I was using this.$root in a normal component. Is this the intended behavior? If it is, how can I get access to actual $parent instance inside a functional child component?

[yyx990803]

To be honest, I think making a component behave differently based on the parent it is inserted into sounds like a bad idea to me - the child component is now coupled to the implementation details to all possible components it may be nested inside. I’d recommend rethinking the design and adhere to the “props down, events up” pattern.

Also, you don’t have to make it functional to use render functions. You can use render functions with normal components too.

[miljan-aleksic]

Another example:

<vk-pagination :total="items.length" :active="pagination.active" :limit="pagination.limit">
  <vk-pagination-prev />
  <vk-pagination-pages />
  <vk-pagination-next />
</vk-pagination>

Using functional components to render the pages, buttons and alike is a good way to let the developer choose the composition of the pagination while not sacrificing performance. Still, the inner components rely on the parent to fire change events or render details (pagination props).

Convertir vk-pagination-pages into a normal componente can’t even be done as it doesn’t support rendering multiple roots.