如何在 Vue 自定义指令中添加事件监听器？

Posted 2023-02-22

【中文标题】如何在 Vue 自定义指令中添加事件监听器？

【英文标题】：How can i add event listener in Vue customized directive?

【发布时间】：2017-05-11 07:39:46

【问题描述】：

我正在使用 Vue2.x，我想通过自定义指令添加事件监听器，但是在 vue1.x 中我可以使用以下代码 sn-p：

Vue.directive('demo',
  bind () 
    let self  = this
    this.event = function (event) 
      self.vm.$emit(self.expression, event)
    
    this.el.addEventListener('click', this.stopProp)
    document.body.addEventListener('click', this.event)
  
)

但是在 vue2.x 中，我发现 'this' 总是未定义，我无法弄清楚如何获取 vm (Vue Instance) 对象。我已经在documentation 上尝试了所有传递的参数列表。

有人知道如何访问 vm 对象吗？

【参考方案1】：

有一些不同之处，您可以在this CodePen 上看到完整的、工作的 sn-p 示例（尽管稍作调整），但我会在这里详细说明：

您对this 的引用无效，因为在指令的上下文中this 指的是window。而不是这些参考：

this.event = ...
// ...
self.vm.$emit()
// ...
self.expression

您应该使用传递给bind() 的三个参数：

el - DOM 元素 binding - 指令元数据的绑定对象，包括 expression vnode - VNode 对象 - 它的 context 属性是 Vue 实例

有了这些，上面的三行将对应：

el.event = ...
// ...
vnode.context.$emit()
// ..
binding.expression

最后，附注：您的事件侦听器不会导致任何事情发生，因为您单击元素会触发 stopProp 函数（从您的 sn-p 中排除），该函数可能会调用 stopPropagation() 但随后您尝试在body 上捕获传播的事件。

【讨论】：

我只是尝试将 click-outside 事件添加到 div。就像这个问题 [***.com/questions/36170425/… click outside element)。但我发现 $emit 回调不起作用。无论如何我找到了vue-clickaway project.非常感谢。