child_parent_communication-event_dispatcher.html

<!DOCTYPE html>
<html>
<head>
	<title>Component Commuincation Event Dispatcher | Vue 2</title>
</head>
<body>

<div id="root">
	<coupon></coupon>
	<coupon></coupon>
	<h1 v-if="couponAppled">You used Coupon!</h1>
</div>

<script src="https://unpkg.com/vue@2.1.3/dist/vue.js"></script>
<script type="text/javascript">
	/* Child Parent Communication using event dispatcher */
	window.Event = new Vue();
	// Other way
	/*window.Event = new class {
		constructor(props) {
		  this.vue = new Vue;
		}

		fire(event, data=null) {
			this.vue.$emit(event, data);
		}

		listen(event, callback) {
			this.vue.$on(event, callback);
		}
	};*/

	Vue.component('coupon', {
		template: `
			<input placeholder="Enter your Coupon Code" @blur="onCouponApplied" />
		`,
		methods: {
			onCouponApplied() {
				Event.$emit('applied');
			}
		}
	})
	new Vue({
		el: '#root',
		data: {
			couponAppled: false
		},
		created() {
			Event.$on('applied', () => alert('Handling it!'));
		}
	})
</script>

</body>
</html>