Как я могу запустить специфичные для компонента события из класса в компоненте Vue?

Question

Я пытаюсь интегрировать Fine Uploader в мой проект, основанный на Laravel & Vue.Этот проект содержит много унаследованного кода, который я должен поддерживать (например, старые классы CSS и т. Д.), Поэтому мне нужно интегрировать Fine Uploader как плагин JS, и я не могу использовать какой-либо существующий сторонний Vue Fine Uploaderкомпоненты , которые могут быть там.

Мне удалось заставить его работать по большей части.Тем не менее, вот проблема, которую я представляю вам.Ниже вы можете увидеть скриншот моего кода, на котором я создаю экземпляр экземпляра Fine Uploader внутри моего подключенного крючка.

Как вы можете видетьЯ выделил ту часть кода, в которой я генерирую событие, когда новый файл передается для загрузки.Здесь, однако, поскольку я нахожусь внутри экземпляра Fine Uploader, когда я делаю это. $ Emit, он не работает (как и не должен).

Я попытался обойти это, используя глобальный eventBus.Это сработало, но создало проблемы, когда несколько файлов были добавлены в загрузчик одновременно.Событие запускается несколько раз и часто теряет отслеживание того, какое событие было запущено каким экземпляром, в результате чего «компонент эскизов» выполняет повторяющиеся действия.

Я убежден, что мне нужно запускать «специфичные для компонента» событиячтобы генерируемые и обновляемые компоненты миниатюр (onProgress и onComplete) выполняли свои соответствующие действия только один раз.

Как можно инициировать события, специфичные для компонента, из экземпляра другого класса?

Спасибо.

Answer 1

Ваши обратные вызовы функций не имеют связанных контекстов, поэтому this внутри обратного вызова не относится к экземпляру Vue (что приведет к $emit, являющемуся undefined).

Естьнесколько различных решений:

• Использование функции стрелки :

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