Functional Components context.parent is root instance

[alidcast]

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]

I know this can be a bit confusing, but this is in fact by design. Functional components are rendered eagerly in the outer-most component's render function, so when its render function is called, the "host" component it is inserted into is not instantiated yet, so there's actually no way to reference the host component from a functional component.

This can unlikely be changed without introducing a breaking change, so we will not be considering it in the short term. However, I'd be interested to hear your use case. From my experience, it's quite rare for functional components to need access to its host instance.

[alidcast]

I totally understand; though It would be helpful if this was made clear in the documentation since the use of parent to refer to two different situations is confusing.

Here's an example of my specific use case, I'd love to hear your take on it as well.

I basically creating a wrapper for a mobiledoc editor. So I need an editor component and the buttons that handle functionality, such as toggling markup or adding content or checking active states.

<editor-component>
   <button-component>
</editor-component>

Rather than creating different components for the different type of buttons, e.g., <markup-button> and <section-button>, I preferred to have one component to delegate to the appropriate buttons.

I first implemented it as a regular component, for example:

// template 
  <button
    id="mobiledoc-button"
    :class="[isActive ? 'active' : '']"
    @click="toggle">
    <slot/>
  </button>


// js
....
  props: {
    type: { type: String, required: true },
    for: { type: String, required: true }
  },
  computed: {
    ....
    isActive() {
      let typeState = `active${this.typeName}Tags`
      return `this.$parent.${typeState}.indexOf(${this.tagName}) > 1`
    }
  },
  methods: {
    toggle() {
      this.$root.$emit(`toggle${this.typeName}`, this.tagName)
    }
  }
}

But when I began to add more types of buttons with different actions and states, this became hard to maintain. So I changed it to a functional component:

function createButton(h, ctx, clickAction) {
  return (
    <button
      id="mobiledoc-button"
      onClick={ clickAction }>
        { ctx.slots().default }
    </button>
  )
}
.....
// example button 
const CardButton = (ctx) => ({
  props: {
    type:    { type: String, required: true },
    name:    { type: String, required: true },
    payload: { type: Object },
    mode:    { type: String }
  },
  render: h => createButton(h, ctx, (payload={}, editMode=false) => {
    // button needs access to $parent activeTags and editor data
    isActive = ctx.$parent.activeTags(ctx.props.name)
    ctx.$parent.editor.insertCard(ctx.props.name, payload, editMode)
  })
})

export default {
  functional: true,

  props: ['editor', 'type', 'tag', 'prompt', 'name', 'text', 'payload', 'mode'],

  render(h, ctx) {
    ctx.data.props = ctx.props // pass props to children
    return h(
      delegateToBtnCmp(ctx)
      ctx.data,
      ctx.children
    )
  }
}

The code is longer now, but more explicit and maintainable, and each button handles its own logic. My problem, however, is that I can't easily access the $parent instance anymore.

I tried creating a new vue instance that the two components could use to store and share the data and methods, which worked. But this approach didn't let me create more than one editor, as the buttons only had access to one editor instance.

So I'm not sure if it would be more appropriate to switch back to a regular component, though I feel this use case is more fitting for a functional 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.

[alidcast]

Yeah, this.$parent felt like a hack, but I couldn't find an easy way for the editor component to pass its instance to its nested button components. I understand the "props down, events up" pattern, but I don't want the users of my component to have to pass data that should be basic to the component's functionality.

For example in this button, <editor-button type="markup" @click="$emit.toggleMarkup" />, I feel like the toggle method should already be inherent to the component and all it should require is the type prop.

The solution I settled on was turning the two components and Vue instance that they share (MobiledocVm) into functions so that I could pass each component the appropriate context and create more than once instance of the editor.

import { MobiledocEditor, MobiledocButton, MobiledocVm  } from "MobiledocEditor"

let editorCtrl = new MobiledocVm()

export default {
  components: {
    MobiledocButton: MobiledocButton(editorCtrl),
    MobiledocEditor: MobiledocEditor(editorCtrl),
  }
  ...
}

Hopefully this approach is better than this.$parent. Thanks for your feedback.

[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.