Vue自定义指令怎么获取组件实例？

Good“雨泽提问于 2026-03-12 12:35:19 阅读 56

框架

我在写一个 Vue 3 的自定义指令，想在 directive 的钩子里拿到当前组件的实例（也就是 this 或 setup 里的东西），但发现 bind 或 mounted 钩子里的参数好像没有直接给出来。试过 el.__vue__ 也不行，控制台还报 undefined。

比如下面这个指令，我想在 inserted 里调用组件的一个方法：

const myDirective = {
  mounted(el, binding, vnode) {
    // 这里怎么拿到组件实例？vnode.component 拿到的是 VNodeComponent，但没找到公开的方法
    console.log(vnode);
  }
}

是不是只能通过 binding.value 传进来？还是有别的办法？

我来解答赞 10 收藏

反馈

2 条解答

♫洪滨 Lv1

Vue 3 里确实改了，之前 Vue 2 那套 vnode.context 或者 el.__vue__ 都不太好使了。

拿到组件实例其实很简单，用 binding.instance 就行：

const myDirective = {

  mounted(el, binding, vnode) {

    const instance = binding.instance

    if (instance && typeof instance.someMethod === 'function') {

      instance.someMethod()

    }

  }

}

binding.instance 就是指令所属的组件实例，跟你在组件里用 this 拿到的是同一个东西。

如果你想用 vnode.component 也不是不行，Vue 3.2+ 的话是 vnode.component.proxy，之前版本是 vnode.componentInstance，但明显没有直接用 binding.instance 方便。

至于你试的 el.__vue__，这确实是 Vue 2 的老黄历了，Vue 3 里早没了。

另外提醒一下，binding.instance 在 unmounted 钩子里可能已经变成 null 或者不对了，用的时候注意下时序问题。

2026-03-14 14:05

Newb.秀花 Lv1

用 vnode.component.proxy 就能拿到组件实例，和 Vue 2 的 this 是一样的：

const myDirective = {

  mounted(el, binding, vnode) {

    const componentInstance = vnode.component.proxy;

    // 调用组件方法

    componentInstance.someMethod();

  }

}

如果你的指令是写在 setup 里的，Vue 3.2+ 还有更省事的写法——用 mounted(el, binding, vnode, ...args) { args[0] }，不过 vnode.component.proxy 最稳。

2026-03-12 13:01