VNode.componentInstance is undefined when rendered by a functional component

[KaelWD]

Version

2.5.17-beta.0
2.5.16

Reproduction link

https://codepen.io/anon/pen/rKwWXq?editors=1010

Steps to reproduce

Open the console

What is expected?

An instance of MyComponent should be logged

What is actually happening?

undefined is logged

---

This worked in 2.5.15
It also works if you change RootComponent to be non-functional:

const content = h(MyComponent, {}, this.slots.default)

I'm guessing this was caused by 62a922e, cloneVNode doesn't include that property.

[haoqunjiang]

IMHO, private APIs may not be the best idea to rely on as they are always subject to change.

[KaelWD]

Yeah probably. It would be nice if it was usable though, because functional components don't have a reliable way to access $refs as far as I know.

[KaelWD]

Ok I've figured out a bit of a workaround using context.data.ref and context.parent.$refs[context.data.ref], but it fills $refs with undefined when the parent re-renders:

Is there anything like _uid to tell functional components apart? (again, more private interfaces)

[KaelWD]

Also is componentInstance even really private API? It doesn't have a _ prefix, and is pretty common to see when working directly with VNodes.

[sc0Vu]

@KaelWD Did you solve this issue? The componentInstance is also undefined when I use named slot like:

A component template

<template v-slot:body>
  <test>Hello world</test>
</template>

B component template

<div>
  <slot name="body"></slot>
</div>

B component script

export default {
  mounted () {
    console.log(this.$slots.body)
  }
}

[edlefebvre]

@KaelWD Did you solve this issue? The componentInstance is also undefined when I use named slot like:

A component template

<template v-slot:body>
  <test>Hello world</test>
</template>

B component template

<div>
  <slot name="body"></slot>
</div>

B component script

export default {
  mounted () {
    console.log(this.$slots.body)
  }
}

Quite an old issue I know... but did you find a solution @sc0Vu ?

[muuyao]

Are there any updates?
This problem is still present in the latest version

[fmwww]

I solved this using the slot attribute. But the problem is that official documents of Vue.js say the slot attribute has already been discarded, and it won't be supported in Vue3. However, we can still use it in all versions of 2.x. Therefore, I think it's probably a bug of v-slot. See Slot Attribute [Deprecated-Syntax]