如何在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 Instance）对象。我已经尝试了文档中所有传递的参数列表。

有谁知道如何访问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。