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

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

框架

我在写一个 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 传进来？还是有别的办法？

我来解答赞 1 收藏

反馈

1 条解答

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