Qfyilyi

It seems that Vue.js 2.0 doesn't emit events from a grand child to his grand parent component.

Vue.component('parent', {

  template: '<div>I am the parent - {{ action }} <child @eventtriggered="performAction"></child></div>',

  data(){

    return {

      action: 'No action'

    }

  },

  methods: {

    performAction() { this.action = 'actionDone' }

  }

})



Vue.component('child', {

  template: '<div>I am the child <grand-child></grand-child></div>'

})



Vue.component('grand-child', {

  template: '<div>I am the grand-child <button @click="doEvent">Do Event</button></div>',

  methods: {

    doEvent() { this.$emit('eventtriggered') }

  }

})



new Vue({

  el: '#app'

})

This JsFiddle solves the issue https://jsfiddle.net/y5dvkqbd/4/ , but by emtting two events:

• One from grand child to middle component


• Then emitting again from middle component to grand parent

Adding this middle event seems repetitive and unneccessary. Is there a way to emit directly to grand parent that I am not aware of?

The Vue community generally favors using Vuex to solve this kind of issue. Changes are made to Vuex state and the DOM representation just flows from that, eliminating the need for events in many cases.

Barring that, re-emitting would probably be the next best choice, and lastly you might choose to use an event bus as detailed in the other highly voted answer to this question.

The answer below is my original answer to this question and is not an approach I would take now, having more experience with Vue.

This is a case where I might disagree with Vue's design choice and resort to DOM.

In grand-child,

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 in parent,

mounted(){

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

}

Otherwise, yes, you have to re-emit, or use a bus.

Note: I added code in the doEvent method to handle IE; that code could be extracted in a reusable way.

Yes, you're correct events only go from child to parent. They don't go further, e.g. from child to grandparent.

The Vue documentation (briefly) addresses this situation in the Non Parent-Child Communication section.

The general idea is that in the grandparent component you create an empty Vue component that is passed from grandparent down to the children and grandchildren via props. The grandparent then listens for events and grandchildren emit events on that "event bus".

Some applications use a global event bus instead of a per-component event bus. Using a global event bus means you will need to have unique event names or namespacing so events don't clash between different components.

Here is an example of how to implement a simple global event bus.

Another solution will be:

Uses vm.$root.$emit in grand-child, then uses vm.$root.$on at the ancestor (or anywhere you'd like).

Vue.component('parent', {

  template: '<div>I am the parent - {{ action }} <child @eventtriggered="performAction"></child></div>',

  data(){

    return {

      action: 'No action'

    }

  },

  created: function () {

  	this.$root.$on('eventtriggered1', () => {

    	this.performAction()

    })

  },

  methods: {

    performAction() { this.action = 'actionDone' }

  }

})



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">Do 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>

NEW ANSWER (Nov-2018 update)

I discovered that we could actually do this by leveraging the $parent property in the grand child component:

this.$parent.$emit("submit", {somekey: somevalue})

Much cleaner and simpler.

This is the only case when I use event bus!! For passing data from deep nested child, to not directly parent, communication.

First: Create a js file (I name it eventbus.js) with this content:

import Vue from 'vue'    

Vue.prototype.$event = new Vue()

Second: In your child component emit an event:

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

Third: In the parent listen to that event:

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

  console.log(data)

})

Note: If you don't want that event anymore please unregister it:

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

INFO: No need to read the below personal opinion

I don't like to use vuex for grand-child to grand-parent communication (Or similar communication level).

In vue.js for passing data from grand-parent to grand-child you can use provide/inject. But there is not something similar for the opposite thing. (grand-child to grand-parent) So I use event bus whenever I have to do that kind of communication.