监听组件从 Vue.js 中的编程路由发出的事件答案

【问题标题】：listen to event emitted by component from a programatic route in Vue.js监听组件从 Vue.js 中的编程路由发出的事件
【发布时间】：2020-01-17 00:38:30
【问题描述】：

我有一个组件可以发出可以成功收听的事件：

<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 的组件实例，不绑定到router-view。

【问题讨论】：

既然您需要以不同的方式处理事件，为什么不能将它们放在单独的组件中？
因为事件类型触发了同屏其他独立组件的状态变化。基本上，您单击电子邮件中的不同内容，它会在其他地方显示信息。但它可以显示电子邮件以外的其他内容，并且该组件可以发出相同的事件字符串，但另一个组件的行为应该不同。
好的，明白了。但是很抱歉，我仍然无法理解为什么这些处理程序不能进入组件本身。
如果处理程序进入组件内部，它不会将所有组件紧密地绑定在一起吗？对我来说，组件的全部承诺是松散绑定：它们不必知道是什么驱动了它们的状态，而应该只是响应式地响应。
“响应式响应”——就是这样，没有先验知识或对任何要响应的内容的引用（如组件内props 或父组件数据），视图如何决定什么甚至在模板或方法中使用/调用？除非我错过了什么。但可能有适合您的用例的解决方法。

标签： vue.js vuejs2 vue-component vue-router

【解决方案1】：

我认为你不应该那样做。相反，您应该将函数 onClickProjectId 作为道具传递，而不是发出事件，您应该调用该函数。

:onClick = "onClickProjectId"

通过这种方式，您可以更好地控制该组件在组件内部的操作。

否则你可以按照 Yom S 上面的建议继续。

【讨论】：

这似乎是一个完全反对事件的论点，这似乎不对。我错过了什么？

【解决方案2】：

您应该能够简单地将它们附加到<router-view>，因为它只是一个组件。

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

【讨论】：

这似乎是正确的。我没有想到的原因是我切换了组件并放入了一个不会发出该事件的新组件。那我该怎么办？我想附加监听器并没有什么坏处，但是如果另一个组件发出了相同的事件名称怎么办？
好吧，如果其他组件直接嵌套在同一个router-view 中，那么相同的事件应该会冒泡并触发和侦听器。不过，请告诉我们您想要实现的具体目标。
我在两个组件之间切换。如果它们都发出同名事件，我的侦听器将为两者触发。我真的想将侦听器绑定到其中一个组件的特定实例，而不是它们中的任何一个可能所在的容器。
监听器应该只对触发组件做出反应。
完全正确.. 那么我该如何连接呢？路由器视图连接机制只接受事件名称字符串。