Version

3.2.33

Reproduction link

sfc.vuejs.org/

Steps to reproduce

We have a simple hierarchy: App > Parent > Child > Grandchild.

Grandchild contains a button that emits a custom event on click.

Child and Parent are dummy wrappers (Child passes button label as a prop just to complicate things).

App binds a listener to the custom Grandchild event through

<parent @event-from-grandchild="handleGrandchildEvent"></parent>

What is expected?

This should not work, custom events don't propagate up, as specified in the docs.

Wrapping components should contain code to manually re-emit the event up the hierarchy.

What is actually happening?

This works. No need to proxy the event.

It works only if the wrapping component includes the child component node only, any other node (be it plain html) will break this chain.

Is this by the design? If yes, I will use it extensively, as I'm having a couple of wrapping components just to pass a shared configuration, styling etc.

Many thanks

Is this by the design?

Yes. any attributes and event listeners that you pass to a child component, and that are not defined as props: or emits: in that child component, will be passed to the root node (if there is exactly one).

Docs: https://vuejs.org/guide/components/attrs.html#nested-component-inheritance

Thanks @LinusBorg, appreciate your answer a lot!

I think this is quite a powerful pattern that perhaps could be a bit more emphasized in the examples and other sections of the documentation that is pretty well documented ;).