Vue.js 是否将单击处理程序添加到引用？

我正在使用第三方软件包，但需要添加一小部分交互

该软件包有一个参考号为“下一步”的按钮。是否仍要将单击处理程序添加到此引用？

类似以下内容：

this.$refs.next.addEventListener('click', function() {
  /* do stuff here*/
}, false);

这可能有助于：

public mounted() {
    const next = this.$refs.next as HTMLElement;
    next.addEventListener('click', this.onNextClick, false);
}

public onNextClick() {
    // do your stuff here
}

---

我遇到了这个问题，想为类似的问题寻找解决方案。但是，我的情况是在Vue组件对象上设置了

ref

属性。在引用对象上使用simple

addEventListener

时出现错误：

addEventListener不是一个函数

解决方案是调用引用组件的

$el

属性上的函数，该属性是一个实际的HTML元素

this.$refs.next.$el.addEventListener('click', function() {
  /* do stuff here*/
}, false);

---

从前面答案中的注释中，我发现OP.

this.$refs.next不是一个函数这里有一些关于代码结构的问题需要回答<代码>此可能有效，也可能无效，这取决于

ref

属性在组件层次结构中的附加位置。在没有看到结构的情况下，最好的建议是进行一些调试，并尝试找出ref存储在哪个组件下。如果您试图与之交互的组件位于您使用上述代码的组件中，@Daniel的建议是正确的。这并不能提供问题的答案。若要评论或要求作者澄清，请在其帖子下方留下评论。-抱歉@panthro，我正在尝试你提供的一点信息。@SherylHohman。我不知道你指的是我的回答还是之前的评论，但你知道，你的评论也没有多大帮助。你知道，有些人试图帮助别人，即使他们的问题很难理解，而不是试图删除任何不符合他们一致性感觉的内容。“as HtmleElement”在我的情况下是不需要的，但重要的是在安装元素之前不要参考参考文献。这里是+1