Можно ли отловить событие из vue компонента в нативном js?

Question

[Andrey Suha]

Кейс вуй встраивается в страницу как отдельный компонент плюс есть файл с нативным js есть способ прослушать например клик в нативном js?

Comments

[Sashqa]

Vue (произносится /vjuː/, примерно как view)

[Andrey Suha]

Sashqa, Спасибо, невероятно ценная информация. Позвольте так же с Вами поделится интересными ссылками вот этой и вот этой

[Kovalsky]

Andrey Suha, а при чем тут сленг? Сам ведь Эван говорит "вью", по правилам оно так и вроде русское комьюнити не перевирает, говорит так же... Ну это и правда не суть.

В чем конкретно вопрос? Опишите кейс, а то не первый взгляд складывается впечатление, что вам просто нужен addEventListener

[Andrey Suha]

Никита Полевой,

Ну это и правда не суть.

И я о том же

вам просто нужен addEventListener

Возможно, конкретной задачи нету, вопрос абстрактный. Есть например компонент component который емитит событие (событие может быть любое как наьивное типа click или input, так и какстомное someEvent), могу я вот это someEvent отловить в нативном js как то так или может как то по другому в самом js обработчик вешеть?

[Kovalsky]

Andrey Suha, а позвольте для начала поинтересоваться почему это нужно делать в обход vue? Я конечно поищу, но звучит странно, непонятный кейс

[Andrey Suha]

Никита Полевой,

а позвольте для начала поинтересоваться почему это нужно делать в обход vue

как сказал выше вопрос абстрактный)) и я не уверен что будет такая ситуация в которой это будет нужно. Как пример в хедере есть некое поле total, просто текст и цифра, а в футере калькулятор который написан на vue и результат вычислений должен прилетать в total. (опять же это не реальный пример, а притянутый за уши). Конечно можно использовать vuex и сделать два компонента, но все же можно обойтись этого?

Answer 1

[Дмитрий Беляев]

import Vue from 'vue';
import Component from './Component.vue';

const component = new Vue(Component).$mount('selector');
component.$on('event-name', () => console.log('wow'));

Comments

[Andrey Suha]

Спасибо)) чекну если работает отмечу решением. Но так вопрос на странице есть общий враппер #app, далее создаётся корневой vue
new Vue({el: '#app'})

Потом регистрируются компоненты через

Vue.component("some-component", require('path-to-component'))

Потом это на странице используется как html тег

<some-component></some-component>

Как в таком случае?

[Дмитрий Беляев]

Andrey Suha, можно повесить ref туда где хотим ловить события
new Vue возвращает vm корневого компонента
если ref атрибут стоит на компоненте, то в $refs объекте будет лежать ссылка на его vm

<some-component ref="someComponent"></some-component>

const app = new Vue({el: '#app'});
app.$refs.someComponent.$on('event-name', () => console.log('wow'));

[Andrey Suha]

Дмитрий Беляев, спасибо

[Виталий Мосин]

Дмитрий Беляев, зачем так сложно?

[Andrey Suha]

Виталий Мосин, у Вас есть вариант проще?

[Виталий Мосин]

Andrey Suha, если компонент используется внутри вью инстанса, то вешайте на него v-on

[Виталий Мосин]

Andrey Suha,

<some-component @some-event="onEvent"></some-component>

Это в том случае, если компонент внутри корневого инстанса вью.

[Andrey Suha]

Виталий Мосин,
Допустим есть компонент some-component, он емитит событие someEvent, по которому нужно вызвать функцию someFunction, причем функция лежит в обычном js файле. Покажите как ее вызвать, если не так как предложил Дмитрий

[sgtpahomey]

Импортируй функцию в компонент из нативного файла.