Vue事件中如何使用事件处理函数生成器？

嘿，我来帮你搞定这个Vue事件处理生成器的问题！

首先，咱们得先搞明白你的代码现在为啥不工作：当你写@click="buildHandler()"的时候，Vue会在按钮点击时执行buildHandler()，得到它返回的那个函数，但不会自动执行这个返回的函数——所以alert永远不会弹出来。

下面给你两种可行的解决方案，按需选择：

方案1：直接在模板中调用生成的处理函数 #

最简单的修改方式，直接在事件绑定里把生成的函数执行掉：

<button @click="buildHandler()()">Click</button>

对应的JS保持不变：

function buildHandler(){
  return function(){ alert("button clicked") }
}

点击按钮时，Vue会先调用buildHandler()拿到处理函数，紧接着执行这个函数，alert就正常弹出了。

方案2：封装一个中间处理方法（更优雅，推荐） #

如果你的生成器逻辑比较复杂，或者需要传递参数，更推荐用这种方式——在Vue的methods里加一个中间方法，专门负责调用生成器并执行返回的函数：

<button @click="handleButtonClick">Click</button>

methods: {
  handleButtonClick() {
    // 调用生成器拿到处理函数
    const clickHandler = this.buildHandler();
    // 执行处理函数
    clickHandler();
  },
  buildHandler() {
    // 这里可以加一些动态生成处理函数的逻辑，比如根据组件状态定制
    return function() {
      alert("button clicked");
    }
  }
}

这种方式代码可读性更高，后续维护或者扩展生成器逻辑也更方便。

额外小提示 #

如果你希望生成器能访问事件对象（比如获取点击的坐标、阻止默认行为），只需要稍微调整一下：

buildHandler() {
  return function(event) {
    console.log("点击事件对象：", event);
    alert("button clicked");
  }
}

然后在方案1中改成buildHandler()($event)，或者方案2中把clickHandler()改成clickHandler($event)，就能把事件对象传递进去啦。

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