Vue3中如何通过VNode或绑定指令调用组件内部方法？

核心方案：通过VNode的component属性获取组件实例 #

在Vue3中，当指令绑定到组件上时，对应的VNode会包含component属性，指向该组件的内部实例。通过component.proxy可以直接访问组件对外暴露的方法和属性，包括你需要的setDisabled。

修改后的指令代码 #

const can = {
  mounted: async (el, binding, vnode) => {
    // 先判断当前绑定的是否为组件实例
    if (vnode.component) {
      const hasAccess = await validateAccess(); // 异步校验需加await确保顺序
      if (!hasAccess) {
        // 调用v-button组件的setDisabled方法
        vnode.component.proxy.setDisabled();
      }
    }
  },
};

关键细节说明 #

• 只有指令绑定在组件上时，vnode.component才会存在；如果绑定在普通DOM元素上，该属性为undefined，所以必须先做判断避免报错。
• component.proxy是组件的代理对象，等价于Vue2中通过vnode.context获取的组件实例，能直接调用组件公开的方法。
• 若validateAccess是异步函数，一定要在mounted钩子中使用await，确保权限校验完成后再执行禁用逻辑。

关于binding.instance的说明 #

binding.instance指向的是使用该指令的父组件实例（也就是包含<v-button>的上层组件），而非<v-button>自身的组件实例，因此无法通过它直接调用子组件的方法。

内容的提问来源于stack exchange，提问作者Moisés