Vue3自定义指令：如何调用绑定组件实例的函数？

在Vue3里，binding.instance就是使用该指令的组件实例，你可以直接通过它访问组件上的方法，不需要像Vue2那样依赖vnode.context。

修改后的指令代码示例 #

let handleOutsideClick: any;
app.directive("closable", {
  mounted: (el, binding, vnode) => {
    // 保存组件实例引用，避免闭包中引用异常
    const componentInstance = binding.instance;
    handleOutsideClick = (e: any) => {
      e.stopPropagation();
      const payload = binding.value;

      // 直接调用组件上的目标方法，比如组件内定义的myFunction
      // 先判断实例和方法是否存在，避免报错
      if (componentInstance && typeof componentInstance.myFunction === 'function') {
        componentInstance.myFunction(payload);
      }
      // 或者用可选链操作符简化写法
      // componentInstance?.myFunction(payload);
    };

    document.addEventListener("click", handleOutsideClick);
  },
  unmounted: (el) => {
    document.removeEventListener("click", handleOutsideClick);
  },
});

关键说明 #

• binding.instance直接指向使用指令的组件实例，组件内定义的所有方法、响应式数据都能通过它访问
• 建议用可选链?.或者条件判断包裹调用逻辑，防止组件实例销毁或方法不存在时出现报错
• 如果用TypeScript，可以通过类型断言给binding.instance指定组件类型，获得类型提示：

  // 定义组件的类型接口
  interface TargetComponent {
    myFunction: (param?: any) => void;
  }
  
  // 在mounted中进行类型断言
  const componentInstance = binding.instance as TargetComponent;
  componentInstance.myFunction(payload);
  

内容的提问来源于stack exchange，提问作者Stark