custom directives on components: Can't access child component in directive hooks. #2562

zq8024 · 2020-11-05T10:05:07Z

Version

3.0.2

Reproduction link

https://codesandbox.io/s/weathered-resonance-d2f6t?file=/src/App.vue

Steps to reproduce

import { createApp } from "vue";

const App = {
    directives: {
        mydir: {
            mounted(el, binding, vnode, oldVnode) {
                console.log(vnode.component) //vnode.component should be CompB vue instance, but now is null
            }
        }
    },

    render() {
        return (<div>
            <CompB name='a1' v-mydir="1" />
        </div>)
    }
}

let CompB = {
    props: ['name'],
    render() {
        return (<div>{'test: '   this.name}</div>);
    }
}

createApp(App).mount('#app');

What is expected?

vnode.component should be the CompB vue instance

What is actually happening?

vnode.component is null

LinusBorg · 2020-11-05T15:00:15Z

the vnode represents the element, not the component.

The corrent way to access the component ìn Vue 3 is binding.instance

zq8024 · 2020-11-06T00:58:54Z

the vnode represents the element, not the component.

The corrent way to access the component ìn Vue 3 is binding.instance

I want get CompB component instance in directive, but binding.instance is App component instance, how can i get CompB instance in directive?

edison1105 · 2020-11-06T01:07:26Z

try getCurrentInstance

zq8024 · 2020-11-06T03:35:55Z

try getCurrentInstance

getCurrentInstance is return null, not CompB instance

LinusBorg · 2020-11-06T06:55:47Z

I'll reopen this for now to explore this. This is a bit of an edge case where in Vue 2, vnode.context would have given you ComponentB indeed, as the vnode context gives you the instance that the elements belongs to.

binding.instance gives you the instance whose template contains the directive, and I'd think that for many typical custom directive situations, that the more desirable behavior.

The two are usually the same except when using a directive on a child component.

I wouldn't not consider this a bug as it is working as expected. We can either find a way to support the edge case or document this as a breaking change.

zq8024 · 2020-11-06T07:45:08Z

I'll reopen this for now to explore this. This is a bit of an edge case where in Vue 2, vnode.context would have given you ComponentB indeed, as the vnode context gives you the instance that the elements belongs to.

binding.instance gives you the instance whose template contains the directive, and I'd think that for many typical custom directive situations, that the more desirable behavior.

The two are usually the same except when using a directive on a child component.

I wouldn't not consider this a bug as it is working as expected. We can either find a way to support the edge case or document this as a breaking change.

I think use binding.context is more suitable for this，because the current vnode is the actual dom element point to, not the ComponentB's vnode

8000

guogangj · 2022-02-18T13:49:16Z

Is there any further news on this issue?

cuiyajie · 2022-04-15T13:13:13Z

I found binding.instance work normal in development, but it turned out to be VNode in production. I use vite for building.

xsdream · 2022-07-01T07:20:02Z

I found binding.instance work normal in development, but it turned out to be VNode in production. I use vite for building.

Finally solved? please

matrunchyk · 2022-07-03T15:09:18Z

I'm looking for this to resolve as well.

The two are usually the same except when using a directive on a child component.

That's exactly exception I ran into.

tklkalok · 2022-07-22T10:40:21Z

I am now facing the exact same situation that needs to access the child component's context (or called instance) in custom directives.

I found that for the mounted arguments ($el, $binding, $vnode, $prevVnode), $vnode.dirs[0].instance sometimes return the child component's context (or instance) and I can manipulate it but not always....

Back to the question itself, I am pretty sure that the child component's context (or instance) is needed to be included in custom directives in some of the use cases and that would be great if the Vue development team could consider adding it back in Vue 3. I'm still looking forward to a solution/workaround.

Cheers!

Vue Version: 3.2.33

decademoon · 2024-09-28T07:28:57Z

binding.instance gives you the instance whose template contains the directive, and I'd think that for many typical custom directive situations, that the more desirable behavior.

Really? What situations would you need the template component instance as opposed to the component instance the directive is applied to?

This is my use case:

const Autoselect = {
  mounted(el, binding, vnode) {
    // If the directive is applied to a component and that component has
    // an exposed select method, call that, otherwise call select on the DOM element
    if (typeof vnode.componentInstance?.select === 'function') {
      vnode.componentInstance.select();
    } else {
      el.select();
    }
  },
};

Some components have special logic for selecting its text contents. Is there no way to do this?

decademoon · 2024-09-28T07:50:16Z

I figured out I can do vnode.ctx.exposed.select() but that's delving into private APIs which isn't ideal.

eric-gitta-moore · 2025-05-14T03:40:44Z

I figured out I can do vnode.ctx.exposed.select() but that's delving into private APIs which isn't ideal.

I'm also exploring similar things, but unfortunately, vnode.component cannot directly obtain the instance of the bound component. Instead, you can get vnode.ctx.proxy.

vnode.ctx.exposed.select() vs vnode.ctx.exposeProxy.select()

For me, I need to call the component to define functions through defineExpose, but I found there are two things named "expose" or something similar. What's the difference between these two?

arcs- · 2025-05-14T07:27:43Z

I figured out I can do vnode.ctx.exposed.select() but that's delving into private APIs which isn't ideal.

I'm also exploring similar things, but unfortunately, vnode.component cannot directly obtain the instance of the bound component. Instead, you can get vnode.ctx.proxy.

vnode.ctx.exposed.select() vs vnode.ctx.exposeProxy.select()

For me, I need to call the component to define functions through defineExpose, but I found there are two things named "expose" or something similar. What's the difference between these two?

I have a similar issue, however, while this works in a dev environment we don't get the exposed functions in a build

eric-gitta-moore · 2025-05-16T14:50:38Z

I figured out I can do vnode.ctx.exposed.select() but that's delving into private APIs which isn't ideal.

I'm also exploring similar things, but unfortunately, vnode.component cannot directly obtain the instance of the bound component. Instead, you can get vnode.ctx.proxy.
vnode.ctx.exposed.select() vs vnode.ctx.exposeProxy.select()
For me, I need to call the component to define functions through defineExpose, but I found there are two things named "expose" or something similar. What's the difference between these two?

I have a similar issue, however, while this works in a dev environment we don't get the exposed functions in a build

I'm sorry that I gave up using custom directives. I believe this is not the functionality I need. The desired feature should be more similar to HOC in React. I just hope that whenever data is passed to the child component, I have the ability to intercept and modify it.

LinusBorg closed this as completed Nov 5, 2020

LinusBorg reopened this Nov 6, 2020

LinusBorg changed the title ~~directive hooks argument vnode.component should not be null~~ customd directives on components: Can't access child component in directive hooks. Nov 6, 2020

LinusBorg changed the title ~~customd directives on components: Can't access child component in directive hooks.~~ custom directives on components: Can't access child component in directive hooks. Nov 7, 2020

haoqunjiang added the 🔩 p2-edge-case label Mar 22, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

custom directives on components: Can't access child component in directive hooks. #2562

custom directives on components: Can't access child component in directive hooks. #2562

custom directives on components: Can't access child component in directive hooks. #2562

custom directives on components: Can't access child component in directive hooks. #2562

Comments

Version

Reproduction link

Steps to reproduce

What is expected?

What is actually happening?