Запускать функции Vuejs из внешнего файла javascript

Отказ от ответственности: мы предполагаем, что вы знакомы с основами vuejs.

Итак, приступим:

Создайте новый пустой файл js и свяжите его в index.template.html (вы найдете его в своем проекте vue). Назовем пустой файл js ext.js, это ваш внешний файл javascript
Теперь добавьте в файл следующий код

function callingVuejsFunction(data) {
    var event = new CustomEvent("hakunaMatata",{ 
        detail:  {
            message: "naiveTechNoobs",
            info: data
    }});

В приведенном выше коде мы создаем функцию с именем callVuejsFunction, внутри которой мы создаем новое настраиваемое событие с именем hakunaMatata ( название события может быть любым). В событии есть поле под названием detail, в которое вы можете добавить любые данные в формате json. В качестве примера мы добавили сообщение и информационный объект. Пришло время прослушать только что созданное событие.
Добавьте приведенный ниже код в ловушку connected () компонента vuejs, в котором вы хотите его использовать.

window.addEventListener('hakunaMatata', this.displayData)

Здесь мы создаем прослушиватель событий, который прослушивает событие hakunaMatata, которое мы создали в файле ext.js. У прослушивателя событий есть дополнительный параметр, в котором вы указываете функцию, которую хотите запустить (в этом примере это this.displayData).
Теперь создайте запускаемую функцию внутри вашего перехватчика methods () и делайте все, что хотите, с полученными данными. В этом примере мы создаем функцию displayData () в ловушке methods (), чтобы сделать что-то вроде этого.

displayData: function(e) {
    console.log(e.detail.message+" "+e.detail.info)
},

Вот и все. Теперь всякий раз, когда вы вызываете callVuejsFunction (data), он запускает событие hakunaMatata, которое будет прослушиваться прослушивателем событий и в свою очередь вызовет функцию displayData ().

Совет по качеству жизни:

Иногда вам также может понадобиться уничтожить прослушиватель событий, когда его работа будет завершена. Все, что вам нужно сделать, это:

window.removeEventListener('hakunaMatata',this.displayData, false);

Мы бы посоветовали вам добавить приведенный выше код в ловушку destroy () вашего компонента.