I just checked that the router-view(in Vue 3) doesn't catch event that are sent from child. For example:

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

Here my child send event-test but the router-view never catch It, so the new-test-event is never emitted.

I just checked that the router-view(in Vue 3) doesn't catch event that are sent from child. For example:

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

Here my child send event-test but the router-view never catch It, so the new-test-event is never emitted.

• javascript
• vue.js
• vuejs3

1 Answer 1

I just found this warning :

[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>
    <ponent :is="Component" />
  </transition>
</router-view>

So the answer is to make this:

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