Vue-next: vnode.component is null, inside a custom directive's hooks, when it is used onto a Vue component

Created on 24 Jul 2020 · 5Comments · Source: vuejs/vue-next

Version

3.0.0-rc.4

Reproduction links

P.S. you should use the browser console

Steps to reproduce

1) Create a custom directive
2) Use it onto a Vue component, logging the arguments of the directive's hooks
3) Expand the vnodes inside the browser console, .component will be null

What is expected?

Is vnode.component the v3 corresponding of v2 vnode.componentInstance, isn't it?
If a custom directive is used onto a Vue component, the vnode.component shouldn't be a reference to it?

What is actually happening?

It is null 😕

Maybe is related to the fact that v3 allows more than one root node, but as you can see the problem persists when there is only one root node as well.

For the sake of completeness, here it is a codepen where v2 is used and vnode.componentInstance is what it is expected.
I don't know why, but you have to keep the codepen console open to properly see the logged vnodes inside the browser console.

Source

jfet97

All 5 comments

Anyway I've tried to add a prop: nothing changes.

I tried it and it work fine.

Picknight on 25 Jul 2020

👎3

@Picknight could you provide a codesandbox like I did? You can fork mine as well.

Because mine contradics what you are saying, but perhaps you are using a different version of Vue 3 or you are doing something different.

Thanks 🙂

jfet97 on 25 Jul 2020

I can confirm that component seems to be null on chrome 84.0.4147.89 and also has the same behavior in firefox.
Perhaps should this be marked as a possible regression issue?

briosheje on 25 Jul 2020

Sorry, I misunderstood your question. My fault. Let me see what I can do to help you. @jfet97

Picknight on 25 Jul 2020

This is expected behavior.

Directives are meant for DOM manipulations. When they are used on a component, they fallthrough like attributes (e.g. class and style) to the root of the component's sub tree. In this case, the vnode you are getting is the vnode representing the child component's root element, not the vnode representing the component itself.