Vujs2 Emit Event

This example uses $emit and $on events.

by Christian Bonato

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<div id="app">
	<button v-on:click="eventParent">Clique me to emit from parent component</button>
	
	<br><br>
	
	<child v-on:event_child="eventChild"></child>
</div>

JavaScript

Vue.component('child', {
	template: '<div><button v-on:click="emit">Clique me to emit from child component</button></div>',
	methods: {
		emit: function() {
			this.$emit('event_child', 1)
		}
	}
});

var vm = new Vue({
	el: '#app',
	created() {
		this.$on('event_parent', function(id){
			console.log('Event from parent component emitted', id)
		});
	},
	data: function() {
		return {
			msg: 'hello vue',
			id: ''
		}
	},
	methods: {
		eventChild: function(id) {
			console.log('Event from child component emitted', id)
		},
		eventParent: function() {
			this.$emit('event_parent', 1)
		}
	}
})