In Vue version 2.4, a new feature was introduced to facilitate the passing of events up the component hierarchy using vm.$listeners

You can find more information about this feature at https://v2.vuejs.org/v2/api/#vm-listeners:

The v-on event listeners from the parent scope (without .native modifiers) can be accessed via v-on="$listeners", which is particularly useful when creating wrapper components with transparent functionality.

Take a look at the code example below that demonstrates the usage of v-on="$listeners" in the grand-child component within the child template:

Vue.component('parent', {
  template:
    '<div>' +
      '<p>I am the parent. The value is {{displayValue}}.</p>' +
      '<child @toggle-value="toggleValue"></child>' +
    '</div>',
  data() {
    return {
      value: false
    }
  },
  methods: {
    toggleValue() { this.value = !this.value }
  },
  computed: {
    displayValue() {
      return (this.value ? "ON" : "OFF")
    }
  }
})

Vue.component('child', {
  template:
    '<div class="child">' +
      '<p>I am the child. I\'m just a wrapper providing some UI.</p>' +
      '<grand-child v-on="$listeners"></grand-child>' +
    '</div>'
})

Vue.component('grand-child', {
  template:
    '<div class="child">' +
      '<p>I am the grand-child: ' +
        '<button @click="emitToggleEvent">Toggle the value</button>' +
      '</p>' +
    '</div>',
  methods: {
    emitToggleEvent() { this.$emit('toggle-value') }
  }
})

new Vue({
  el: '#app'
})

.child {
  padding: 10px;
  border: 1px solid #ddd;
  background: #f0f0f0
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <parent></parent>
</div>

When it comes to tackling this issue, the Vue community generally leans towards using Vuex. By updating the Vuex state, changes are automatically reflected in the DOM representation without the need for additional events in many scenarios.

If Vuex isn't your preferred route, re-emitting could be a viable alternative, or as a last resort, utilizing an event bus as outlined in the top-voted answer to this question.

While the following was my initial solution to the problem, with more experience in Vue, I would approach it differently now.

In instances like these, where I may diverge from Vue's design philosophy, resorting to direct manipulation of the DOM is an option.

Within the grand-child component,

methods: {
    doEvent() { 
        try {
            this.$el.dispatchEvent(new Event("eventtriggered"));
        } catch (e) {
            // Handle IE not supporting Event constructor
            var evt = document.createEvent("Event");
            evt.initEvent("eventtriggered", true, false);
            this.$el.dispatchEvent(evt);
        }
    }
}

And within the parent,

mounted(){
    this.$el.addEventListener("eventtriggered", () => this.performAction())
}

If all else fails, resorting to re-emitting or employing an event bus could also work.

Note: I included code in the doEvent method to address issues with IE; this could potentially be refactored for better reusability.

A common misconception is that events in Vue only travel from child to parent and do not go any further, like from child to grandparent.

To address this issue briefly, the Vue documentation discusses the topic of Non-Parent-Child Communication in a specific section.

The suggested approach involves creating an empty Vue component in the grandparent component, which is then passed down to children and grandchildren through props. The grandparent component can then listen for events while grandchildren emit events on this designated "event bus".

In some cases, applications utilize a global event bus instead of individual event buses for each component. In such situations, it is crucial to use unique event names or namespaces to prevent conflicts between different components' events.

For those interested, here is an example demonstrating how to implement a simple global event bus: how to implement a simple global event bus.

To achieve flexibility and seamlessly propagate an event to all ancestors and their predecessors up to the root, you can utilize the following approach:

let component = this.$parent

while(component) {
    component.$emit('submit')
    component = component.$parent
}

A different approach would involve triggering the event at the root node:

Start by using vm.$root.$emit in the grand-child component, then listen for that event using vm.$root.$on in the ancestor component (or any desired location).

Update: If there are specific situations where you need to disable the listener, you can utilize vm.$off (for instance: vm.$root.off('event-name') within the beforeDestroy lifecycle hook).

Vue.component('parent', {
  template: '<div><button @click="toggleEventListener()">Listener is {{eventEnable ? "On" : "Off"}}</button>I am the parent - {{ action }} <child @eventtriggered="performAction"></child></div>',
  data(){
    return {
      action: 1,
      eventEnable: false
    }
  },
  created: function () {
    this.addEventListener()
  },
  beforeDestroy: function () {
    this.removeEventListener()
  },
  methods: {
    performAction() { this.action += 1 },
    toggleEventListener: function () {
      if (this.eventEnable) {
        this.removeEventListener()
      } else {
        this.addEventListener()
      }
    },
    addEventListener: function () {
      this.$root.$on('eventtriggered1', () => {
        this.performAction()
      })
      this.eventEnable = true
    },
    removeEventListener: function () {
      this.$root.$off('eventtriggered1')
      this.eventEnable = false
    }
  }
})

Vue.component('child', {
  template: '<div>I am the child <grand-child @eventtriggered="doEvent"></grand-child></div>',
  methods: {
    doEvent() { 
        //this.$emit('eventtriggered') 
    }
  }
})

Vue.component('grand-child', {
  template: '<div>I am the grand-child <button @click="doEvent">Emit Event</button></div>',
  methods: {
    doEvent() { this.$root.$emit('eventtriggered1') }
  }
})

new Vue({
  el: '#app'
})

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <parent></parent>
</div>

Within VueJS 2 components, there exists a $parent property that holds reference to their immediate parent component.

This parent component, in turn, possesses its own $parent property.

To access the "grandparent" component, one must navigate through the "parent's parent" component:

this.$parent["$parent"].$emit("myevent", { data: 123 });

Nevertheless, this method may be considered somewhat complex, and it is advisable to utilize a global state manager such as Vuex or similar tools, as suggested by other contributors.

I've created a handy mixin inspired by @digout's solution. Simply place it before initializing your Vue instance (new Vue...) to utilize it across your entire project. You can easily use it just like a regular event.

Vue.mixin({
  methods: {
    $propagatedEmit: function (event, payload) {
      let vm = this.$parent;
      while (vm) {
        vm.$emit(event, payload);
        vm = vm.$parent;
      }
    }
  }
})

Expanding on the responses from @kubaklam and @digout, here is my approach to prevent emitting on every parent component between a grandchild and a distant grandparent:

{
  methods: {
    tunnelEmit (event, ...payload) {
      let vm = this
      while (vm && !vm.$listeners[event]) {
        vm = vm.$parent
      }
      if (!vm) return console.error(`no target listener for event "${event}"`)
      vm.$emit(event, ...payload)
    }
  }
}

When creating a component with distant grandchildren and you want to avoid many components being connected to the store but still maintain the root component as a source of truth, this method works effectively. It aligns with Ember's philosophy of data down actions up. The limitation is that it won't work if you need to listen for the event on every parent in between. In such cases, you can utilize $propogateEmit as discussed in the previous response by @kubaklam.

Edit: The initial vm variable should reference the component itself rather than its parent. Meaning let vm = this, not let vm = this.parent

When it comes to passing data from a deep nested child component to its parent, I always resort to using an event bus.

To start off: Begin by creating a JavaScript file (I typically name it eventbus.js) containing the following code:

import Vue from 'vue'    
Vue.prototype.$event = new Vue()

Next: Emit an event in your child component like so:

this.$event.$emit('event_name', 'data to pass')

Then: Listen for that event in the parent component:

this.$event.$on('event_name', (data) => {
  console.log(data)
})

Note: To stop listening to an event, simply unregister it:

this.$event.$off('event_name')

NOTE: You can skip the personal opinion section below

Personally, I prefer not to use Vuex for communication between grand-child and grand-parent components.

In vue.js, you can utilize provide/inject for passing data from grand-parent to grand-child components. However, there isn't a similar built-in method for the opposite direction (grand-child to grand-parent). This is why I rely on event bus for such scenarios.

Expanding on @digout's response, I believe that if the intention is to transmit data to a distant ancestor, using $emit may not be necessary. I experimented with this in a specific scenario and found success without it. While this functionality could potentially be achieved through a mixin, it is not a requirement.

/**
 * Send some content as a "message" to a named ancestor of the component calling this method.
 * This is an edge-case method where you need to send a message many levels above the calling component.
 * Your target component must have a receiveFromDescendant(content) method and it decides what
 * to do with the content it gets.
 * @param {string} name - the name of the Vue component eg name: 'myComponentName'
 * @param {object} content - the message content
 */
messageNamedAncestor: function (name, content) {
  let vm = this.$parent
  let found = false
  while (vm && !found) {
    if (vm.$vnode.tag.indexOf('-' + name) > -1) {
      if (vm.receiveFromDescendant) {
        found = true
        vm.receiveFromDescendant(content)
      } else {
        throw new Error(`Found the target component named ${name} but you dont have a receiveFromDescendant method there.`)
      }
    } else {
      vm = vm.$parent
    }
  }
}

If dealing with an ancestor:

export default {
  name: 'myGreatAncestor',
  ...
  methods: {
     receiveFromDescendant (content) {
        console.log(content)
     }
   }
}

A great grand-child expresses

// Communicate essential information to the ancestor component
this.messageNamedAncestor('myGreatAncestor', {
  importantInformation: 'Hello from your great descendant'
})

Vue 3 has ushered in a series of significant changes to root events:

The traditional $on, $off, and $once root methods no longer exist. However, there are alternatives available for listening to root events by following this approach: guide to root component events.

createApp(App, {
  // Listen for the 'expand' event
  onExpand() {
    console.log('expand')
  }
})

Event buses offer another solution, although Vue.js documentation cautions against them due to potential maintenance complications in the long term. Examples of event bus implementations mentioned include mitt and tiny-emitter.

The preferred approach according to the docs is as follows:

• Props: Ideal for parent-child communication.
• Provide/Inject: Ancestor-descendant communication method (not vice versa).
• Vuex: Recommended for managing global state, primarily intended for state management rather than event handling.

Ultimately, the decision between using an event bus or Vuex depends on the specific requirements. Integrating the event bus within Vuex can help centralize its functionality if global state access is also required. Otherwise, strictly controlling the behavior and placement of the event bus could be beneficial.

The method of creating a class that is linked to the window is quite impressive, especially in simplifying the broadcast/listen process within a Vue app.

window.Event = new class {

    constructor() {
        this.vue = new Vue();
    }

    fire(event, data = null) {
        this.vue.$emit(event, data);
    }

    listen() {
      this.vue.$on(event, callback);  
    }

}

With this setup, you can easily trigger actions from any part of the codebase:

Event.fire('do-the-thing');

Furthermore, you can set up listeners in various components by using:

Event.listen('do-the-thing', () => {
    alert('Doing the thing!');
});