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中，我发现＆＃39;这个＆＃39;总是未定义。我无法弄清楚如何获取vm（Vue实例）对象。我已经尝试了documentation上所有传递的参数列表。

有谁知道如何访问vm对象？

Answer 1

有一些差异，你可以在this CodePen看到你的代码片段的完整，有效的例子（虽然稍微调整一下），但我会在这里详细说明：

您对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函数（从您的代码段中排除），这可能会调用stopPropagation()，但随后您试图捕获body上传播的事件。

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

1 个答案: