如何从 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(...)
    }
  })