прослушивание события, испускаемого компонентом из программного маршрута в Vue.JS

прослушивание события, испускаемого компонентом из программного маршрута в Vue.JS

16.09.2019 10:43:07 Просмотров 60 Источник

У меня есть компонент, который выдает события, которые я могу успешно слушать:

<email-widget 
    v-bind:company-id="clicked_company_id" 
    v-bind:project-id="clicked_project_id"
    v-on:project-clicked="onClickProjectId"
>
</email-widget>

Теперь я обновляю свою систему для использования маршрутизаторов, и у меня есть программный маршрутизатор, который выглядит следующим образом:

let emailComponent= Vue.component('email-widget')

const routes = [
    { path: '/settings', component: Bar },
    { 
        path: '/emails', 
        name: 'emails',
        component: emailComponent 
    },

]

router.push({ name: 'emails', 
    params: {}
})

Это делает правильно.

Но как я могу добавить слушателя для события?

Новинки:

Это решение работает:

<router-view
  :company-id="clicked_company_id" 
  :project-id="clicked_project_id"
  @project-clicked="onClickProjectId">
</router-view>

Однако весь смысл представления маршрутизатора заключается в переключении того, какой компонент находится внутри него. Если второй компонент project-clicked, а не к представлению emailComponent.

У вопроса есть решение - Посмотреть?

https://stackoverflow.com/questions/57952373/listen-to-event-emitted-by-component-from-a-programatic-route-in-vue-js#comment102376737_57952373
Поскольку вам нужно обрабатывать события по-разному, почему вы не можете поместить их в отдельные компоненты?
https://stackoverflow.com/questions/57952373/listen-to-event-emitted-by-component-from-a-programatic-route-in-vue-js#comment102376759_57952373
Поскольку тип события инициирует изменение состояния для других независимых компонентов на том же экране. В основном вы нажимаете разные вещи в электронном письме, и он отображает информацию в другом месте. Но он может отображать что-то другое, кроме электронной почты, и этот компонент может выдавать ту же строку события, но другой компонент должен вести себя по-другому.
https://stackoverflow.com/questions/57952373/listen-to-event-emitted-by-component-from-a-programatic-route-in-vue-js#comment102376817_57952373
Ладно, я понял твою точку зрения. Но извините, я все еще не могу понять, почему эти обработчики не могут войти внутрь самих компонентов.
https://stackoverflow.com/questions/57952373/listen-to-event-emitted-by-component-from-a-programatic-route-in-vue-js#comment102376902_57952373
Если бы обработчик вошел внутрь компонента, разве он не связал бы все компоненты вместе очень плотно? Для меня все обещание компонентов-это свободная привязка: они не должны знать, что движет их состоянием, и должны просто реагировать реактивно.
https://stackoverflow.com/questions/57952373/listen-to-event-emitted-by-component-from-a-programatic-route-in-vue-js#comment102377366_57952373
Может быть, какая-то компонентная структура поможет нам увидеть большую картину здесь. ATM, я представляю себе представление, содержащее несколько независимых компонентов, которые полагаются на одну и ту же информацию, передаваемую родителем, и эти компоненты должны каким-то образом осознавать одно и то же событие, испускаемое вызывающим компонентом.
https://stackoverflow.com/questions/57952373/listen-to-event-emitted-by-component-from-a-programatic-route-in-vue-js#comment102377550_57952373
Или вы можете попытаться передать что-то всем независимым компонентам в одном шаблоне, что не должно быть проблемой, если они просто слушают событие(события). Я думаю, что это слишком широко и нужно больше структурных деталей. Если вы не можете принять мое предлагаемое решение, пока я (или кто-то другой) не смогу дать вам то, что вы, вероятно, будете счастливы, пожалуйста, не стесняйтесь делать это. Мое текущее решение, конечно, покрывает общие потребности в глобальном событии эмиссии и / или привязке реквизита.
https://stackoverflow.com/questions/57952373/listen-to-event-emitted-by-component-from-a-programatic-route-in-vue-js#comment102379723_57952373
Возможно, меньший взгляд на проблему лучше: как привязать прослушиватель событий к определенному экземпляру компонента? Если маршрутизатор-представление может содержать два разных компонента (C1 и C2), и оба испускают "событие-X", как я различаю C1.событие-X и C2.event-X (без написания кода в обработчике событий для проверки того, что отображается в данный момент).

Ответы - прослушивание события, испускаемого компонентом из программного маршрута в Vue.JS / listen to event emitted by component from a programatic route in Vue.js

Является ответом!
Yom S.

16.09.2019 10:50:42

Вы должны быть в состоянии просто прикрепить их на <router-view>, потому что это просто компонент.

<router-view
  :company-id="clicked_company_id" 
  :project-id="clicked_project_id"
  @project-clicked="onClickProjectId">
</router-view>
https://stackoverflow.com/questions/57952373/listen-to-event-emitted-by-component-from-a-programatic-route-in-vue-js/57952474#comment102325500_57952474
Это кажется правильным. Причина, по которой я не думал об этом, заключается в том, что я переключаю компонент и помещаю новый, в котором не испускает это событие. Что же мне тогда делать? Я думаю, что нет никакого вреда в том, что слушатель подключен, но что, если другой компонент испустил то же самое имя события?
https://stackoverflow.com/questions/57952373/listen-to-event-emitted-by-component-from-a-programatic-route-in-vue-js/57952474#comment102343763_57952474
Ну, если этот другой компонент непосредственно вложен в то же router-view, то одно и то же событие(ы) должно всплывать и запускать и прослушивать. Дайте нам знать, что вы пытаетесь достичь конкретно, хотя.
https://stackoverflow.com/questions/57952373/listen-to-event-emitted-by-component-from-a-programatic-route-in-vue-js/57952474#comment102344176_57952474
Я переключаюсь между двумя компонентами. Если они оба испускают событие с тем же именем, мой слушатель будет инициировать оба. Я действительно хочу привязать слушателя к определенному экземпляру одного из компонентов, а не к контейнеру, в котором может находиться любой из них.
https://stackoverflow.com/questions/57952373/listen-to-event-emitted-by-component-from-a-programatic-route-in-vue-js/57952474#comment102344259_57952474
Слушатель должен действительно реагировать только на запускающий компонент.
https://stackoverflow.com/questions/57952373/listen-to-event-emitted-by-component-from-a-programatic-route-in-vue-js/57952474#comment102344404_57952474
Именно так.. Итак, как мне подключить это? Механизм подключения вида маршрутизатора принимает только строку имени события.
https://stackoverflow.com/questions/57952373/listen-to-event-emitted-by-component-from-a-programatic-route-in-vue-js/57952474#comment102344414_57952474
Можете ли вы обновить свой вопрос и включить некоторые примеры ввода-вывода?
https://stackoverflow.com/questions/57952373/listen-to-event-emitted-by-component-from-a-programatic-route-in-vue-js/57952474#comment102357226_57952474
Вопрос обновлен с дополнительными деталями. Спасибо за вашу помощь @Yom S.
void

16.09.2019 10:58:32

Я не думаю, что тебе стоит это делать. Вместо этого вы должны передать функцию onClickProjectIdкак prop, и вместо того, чтобы испускать событие, вы должны вызвать эту функцию.

:onClick = "onClickProjectId"

Таким образом, у вас будет больше контроля над тем, что этот компонент делает внутри самого компонента.

В противном случае вы можете идти вперед с тем, что Йом с предложил выше.

https://stackoverflow.com/questions/57952373/listen-to-event-emitted-by-component-from-a-programatic-route-in-vue-js/57952589#comment102324796_57952589
Это похоже на аргумент против событий полностью, что не кажется правильным. Что я упускаю?
Закрыть X