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

Question

我使用的是Vue2.x，我想通过使用自定义指令来添加一个事件侦听器，但是在vue1.x中，我可以使用以下代码片段：

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实例)对象。我已经尝试过文档上所有传递的参数列表。

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

Answer 1

这里有一些不同之处，您可以在这个CodePen上看到完整的代码片段示例(尽管略有调整)，但我将在这里详细说明：

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

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

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

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

上述三条线在手，则对应于：

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

最后，请注意:您的事件侦听器不会导致任何事情发生，因为您对元素的单击触发了一个stopProp函数(该函数被排除在您的代码片段之外)，该函数可能调用stopPropagation()，但随后尝试在body上捕获传播的事件。