Vue 3 上的路由器视图无法捕获子级的事件

Question

我刚刚检查了路由器视图（在 Vue 3 中）没有捕获从子级发送的事件。例如：

  <router-view
    @event-test="$emit('new-test-event')"
  />

在这里，我的孩子发送event-test但router-view从未捕获它，因此new-test-event从未发出。

Answer 1

我刚刚发现这个警告：

[Vue Router warn]: <router-view> can no longer be used directly inside <transition> or <keep-alive>.
Use slot props instead:

<router-view v-slot="{ Component }">
  <transition>
    <component :is="Component" />
  </transition>
</router-view>

所以答案是这样做：

  <router-view v-slot="{ Component }">
      <component :is="Component" @event-test="$emit('new-test-event')"/>
  </router-view>