javascript - Router view on Vue 3 doesn't catch event from child - Stack Overflow

admin管理员组

文章数量:1322675

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

Share Improve this question Follow edited Oct 31, 2020 at 9:19 Adri HM asked Oct 31, 2020 at 8:37 Adri HMAdri HM 3,10033 gold badges2222 silver badges3131 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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>

本文标签： javascriptRouter view on Vue 3 doesn39t catch event from childStack Overflow