Use vm.$on to listen to event emitted from child in vue.js 2.0 -


i've been through vue.js events section on events seems give examples of how listen events using vm.$on handler within html. between , new changes 2.0 i'm unsure how transmit event child -> parent.

i need transmit event because after parent receiving want broadcast child.

i'm using single page components, setup:

// parent export default {   mounted: function () {     this.$on('myevent', function (msg) {     console.log('caught in parent', msg)   });  },  components: {   'child': child,  }, }  // child this.$emit('myevent', true) 

how can receive event on parent vm please? note, don't want use $on in html. want event receiving logic in vm should be.

thanks,

vues documentation on $emit not comprehensive, however, there few ways this. firstly have $emit on vue model want send message if want use this.$on(), if sending component can emit direct parent using:

this.$parent.$emit('myevent',true); 

however, can become problematic if have long chain of parents because have $emit child chain, in case can use vue instance bus:

// in root global variable components have access var bus = new vue({}); 

or if using single file components.

window.bus = new vue({}); 

then in receiver:

bus.$on('myevent',() => {    // stuff }); 

and in emitter:

bus.$emit('myevent',true); 

finally, if find app getting complex simple bus can use vuex:

https://vuex.vuejs.org/en/index.html


Comments

Popular posts from this blog

php - How to add and update images or image url in Volusion using Volusion API -

javascript - IE9 error '$'is not defined -