Emit an event from a component to the root component if there's another child in between

Is it possible to Emit an event from a component to the root component if there’s another child in between? Example:

Main Component:
Child Component 1
Child Component 2

I want to pass a parameter from Child Component 2 to Main Component, for now I’m Emitting an event to Child Component 1, but is it possible to pass it to Main Component? directly? Or do I need to pass it to child 1 and then from child 1 to Main Component?

You can pass events up using v-on="$listeners" on the component.

e.g.

// Child Component 1
<template>
  //...
  <ChildComponent2 v-on="$listeners" />
  // ...
</template>

Aren’t custom events propagated to the root by default?

Child component 2 is a child component of Child Component 1

-Main Component
|
-Child Component 1
|
-Child Component 2

Not:

-Main Component
|
-Child Component 1
-Child Component 2

No, they aren’t. See this example: https://jsfiddle.net/jamesbrndwgn/nq4tvu65/

Yes, exactly. As my example illustrated.

Hmm… 2 weeks ago, I didn’t thought so either, so in a hobby project of mine, I added `@theEvent="$emit(‘theEvent’)"´ to the middle component to make sure the event was propagated. But then the parent received the event twice, and when I removed it the parent received the event once, as I wanted. So I draw the conclusion back then that events must be propagated all the way back to root by default, but I guess that conclusion was wrong. Now I must double check what really happened :stuck_out_tongue: