vue.js - VueJS Grandchild component call function in Great grandparent component -

suppose have child component want send message great grandparent, code this, correct me if i'm wrong:

vue.component('child', {   template: `<div v-on:click="clicked">click me</div>`,   methods: {     clicked: function () {         this.$emit('clicked', "hello")     },   }, });  vue.component('parent', {   template: `<child v-on:clicked="clicked"></child>`,   methods: {     clicked: function (msg) {         this.$emit('clicked', msg)     },   }, });   vue.component('grandparent', {   template: `<parent v-on:clicked="clicked"></parent>`,   methods: {     clicked: function (msg) {         this.$emit('clicked', msg)     },   }, });  vue.component('greatgrandparent', {   template: `<grandparent v-on:clicked="clicked"></grandparent>`,   methods: {     clicked: function (msg) {         console.log('message great grandchild: ' + msg);     },   }, }); 

is there possibility directly intercept message child , call clicked function in great-grandparent without need set passing callback @ every parent?

i know can use custom databus, https://vuejs.org/v2/guide/components.html#non-parent-child-communication, since components have parent-child relationship already, shouldn't able notify grandparent in simpler way?

not if want maintain encapsulation. greatgrandparent not supposed know child. knows grandparent, not there sub-components or how many. in principle, can swap 1 implementation of grandparent out doesn't have multiple layers. or has more layers child. , put child top-level component.

you know notion of global event bus. bus doesn't have global, though. can pass down props chain. (you use greatgrandparent bus, expose children; better hygiene make real bus.)

this distinguishes top-level components sub-components: sub-component receive bus prop perform functions of top-level component helps implement. top-level component originate bus.

vue.component('child', {    template: `<div v-on:click="clicked">click me</div>`,    props: ['bus'],    methods: {      clicked: function() {        this.bus.$emit('clicked', 'hello');      },    },  });    vue.component('parent', {    template: `<child :bus="bus"></child>`,    props: ['bus']  });      vue.component('grandparent', {    template: `<parent :bus="bus"></parent>`,    props: ['bus']  });    vue.component('greatgrandparent', {    template: `<grandparent :bus="bus" v-on:clicked="clicked"></grandparent>`,    data() {      return {        bus: new vue()      };    },    created() {      this.bus.$on('clicked', this.clicked);    },    methods: {      clicked: function(msg) {        console.log('message great grandchild: ' + msg);      },    },  });    new vue({    el: '#app'  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>  <greatgrandparent id="app"></greatgrandparent>