Vue Component Communication 1

by Tuan Truong

HTML

<div id="root">
  <coupon @applied="onCouponApplied"></coupon>
  
  <h1 v-if="couponApplied">You used a coupon</h1>
</div>

Vue

Vue.component('coupon',{
	template: `
  	<input placeholder="Enter your coupon code" @blur="onCouponApplied">
  `,
  methods: {
  	onCouponApplied(){
    	this.$emit('applied');
    }
  }
})

new Vue({
 el: "#root",
 data: {
 	couponApplied: false
 },
 methods: {
 	onCouponApplied(){
  	alert('It was applied');
    this.couponApplied = true;
  }
 }
 
})