Vue emits "Extraneous non-emits event listeners" warning for events on RouterView

[jez9999]

Reproduction

https://stackblitz.com/edit/vitejs-vite-jy1j3d

Steps to reproduce the bug

Listen for an event on router-view which is emitted by a child component. Vue will display a warning about "Extraneous non-emits event listeners" even though a child component emits the event, if the initial path loaded renders a child component that doesn't emit the event.

Expected behavior

Vue detects that one of the child components that may be rendered by the router view emits the event, and doesn't give the warning.

Actual behavior

Vue gives the warning.

Additional information

No response

[posva]

This is not related to the router: the Home component doesn't declare that emit, that's why you see the warning. Since the @displaymodal is always bound to whatever component RouterView renders, when it renders a component that doesn't emit the event, Vue will warn you about it.

[jez9999]

OK, but doesn't that, you know, suck? I have 5 components I'm going to render with my router based on the path, I want to emit an event from 1 or 2 of them and listen for it in App.vue but I'm unlikely to want to emit the event from all of them. You're saying that, to avoid a warning, I have to arbitrarily define the event in all 5 components. Even the ones that are never going to emit the event. That's unmaintainable, and unsemantic.

[jez9999]

@posva But why should the Home component need to? There needs to be a mechanism to allow any child component that may be rendered by a router-view to emit events through the router-view.

[jez9999]

@posva Kindly re-open this discussion, it is NOT resolved, I have NOT received a decent answer to my query, and you DIDN'T even ask me before closing it. 😠