如何在Vue组件的类中触发组件特定的事件？

Question

我正在尝试将Fine Uploader集成到基于Laravel＆Vue构建的项目中。这个项目有很多我必须支持的遗留代码（例如旧的CSS类等），因此我需要将Fine Uploader集成为JS插件，并且不能使用任何可能无法使用的existing 3rd party Vue Fine Uploader components在那里。

我已经设法使其在大多数情况下都能正常工作。但是，这是我要向您提出的挑战。在下面，您可以看到我的代码的屏幕截图，其中我在安装的钩子中实例化了Fine Uploader实例。

如您所见，我突出显示了代码的一部分，当提交新文件上传时，我将在该部分发出事件。但是，在这里，因为我在Fine Uploader实例中，所以当我执行此操作时。$ emit无效（因为它不应该如此）。

我试图通过使用全局eventBus来规避这一问题。这可行，但是当将多个文件立即放入上传器时会产生问题。该事件会触发多次，并且通常无法跟踪哪个实例触发了哪个事件，从而导致“缩略图组件”执行重复的操作。

我坚信我需要触发“特定于组件”的事件，以便生成和更新的缩略图组件（onProgress和onComplete）仅执行一次其相关操作。

如何在另一个类实例中触发特定于组件的事件？

谢谢。

Answer 1

您的函数回调函数没有上下文绑定，因此回调函数中的this并不引用Vue实例（这将导致$emit为undefined）。

有几种不同的解决方案：

• 使用arrow-function：

  onSubmitted: (id, name) => {
    // `this` is Vue instance
  }
  

• 使用Function#bind绑定函数上下文：

  onSubmitted: function(id, name) {
     // `this` is Vue instance
  }.bind(this)
  

• 使用对Vue实例的缓存引用：

  const vm = this;
  const f = new qq.FineUploaderBasic({
    // ...
    onSubmitted: function(id, name) {
       vm.$emit(...)
    }
  })