I've been delving into Vue.js event handling and I believe developers can utilize this.$on('event', handler) in their JavaScript files to handle the 'event'.
An interesting example demonstrates this concept.
<div id="mainapp" v-on:event="processEventFromView">
<button type="button" v-on:click="emitEvent">
Emit Event
</button>
</div>
JavaScript File
var app = new Vue({
el:"#mainapp",
data:{
show:false
},
created:function(){
this.$on('event', this.processEvent);
},
methods:{
emitEvent:function(){
this.$emit('event', {data:'mydata'});
},
processEvent(data){
console.log('JavaScript', data); //this is triggered when the button is clicked.
},
processEventFromView(data){
console.log('view', data); //this is not triggered at all.
}
}
})
In the example, only the handler processEvent which is attached via this.$on() gets called upon clicking the button.
What sets v-on apart from this.$on?
Why doesn't
v-on:event="processEventFromView"Instead of using
v-on:click="emitEvent", could an event handler be linked to the button's click event through a reference (ref)? I'd appreciate any help in identifying where I might have gone wrong.