Question

我有一个包装第三者视频组件的子组件。我该如何侦听此子组件发出的所有事件？

<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>内部，我将所有发出的事件合并为具有type属性的单个事件。现在有一个缺点，因为handleEvent函数可能会变成长的switch语句。有没有一种可以进行更多声明的方法？

例如

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

Answer 1

也许该主题的解决方案会为您提供帮助？ How to listen to all custom events in VueJS?

Answer 2

最后，我将所有内容全部写在父组件中，其中<parent>充当其余应用程序的控制器。不像我希望的那样声明性的-绝对不会回答这个问题。我认为这不可能。

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

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

收听Vue中所有子组件发出的事件

2 个答案: