child_parent_communication-custom_event.html

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

<div id="root">
	<coupon @applied="onCouponApplied"></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 */
	Vue.component('coupon', {
		template: `
			<input type="text" @blur="onCouponApplied" />
		`,
		methods: {
			onCouponApplied() {
				this.$emit('applied');
			}
		}
	})
	new Vue({
		el: '#root',
		data: {
			couponAppled: false
		},
		methods: {
			onCouponApplied() {
				this.couponAppled = true;
			}
		}
	})
</script>

</body>
</html>