监听 Vue 中所有子组件发出的事件答案

【问题标题】：Listen to all child component emitted events in Vue监听 Vue 中所有子组件发出的事件
【发布时间】：2019-11-07 06:27:35
【问题描述】：

我有一个包含第 3 方视频组件的子组件。如何监听从这个子组件发出的所有事件？

<event-emitter
    v-on:play="handleEvent"
    v-on:stop="handleEvent"
    v-on:ad-pause="handleEvent"
    v-on:ad-play="handleEvent"
    v-on:video-quartile-25="handleEvent"
    v-on:video-quartile-50="handleEvent"
    ... this could many more lines ...
 ></event-emitter>

一个事件可能看起来像这样{ type: "play", time: 28, ... }

目前我有这个

 <event-emitter v-on:emitter-events="handleEvent"></event-emitter>

在<event-emitter> 中，我将所有发出的事件合并为单个事件，并带有一个类型属性。现在有一个缺点，因为 handleEvent 函数很可能会变成长的 switch 语句。有没有一种更具声明性的方法？

例如

 <event-emitter 
   v-on:listen-to-all-events="normalHander"
   v-on:something-unusal-has-happend="aHandlerForThisVariationOfEvent"
 ></event-emitter>

【问题讨论】：

我认为通过事件函数接收不同类型的对象是更好的选择
也许在函数名中使用事件类型？像这样 ["handler"+[event.type]]() 虽然我不确定最小化器是否会取消函数名称

标签： vue.js vuejs2 vue-component

【解决方案1】：

最后我只是把它全部写在父组件中，<parent> 充当了其余应用程序的控制器。不像我希望的那样是声明性的——虽然绝对没有回答这个问题。我认为不可能像描述的那样。

@Gander 提供的事件总线链接仍然有用。

<parent> <-- I handle the EmitterEvents
  <somthing-else />
  <event-emitter v-bind:emitter-events="handleEmitterEvents" />
  <another-component />
</parent>

【讨论】：