- Component's button @click...
- ...calls component’s
addToCart
method... - ...which emits
add-to-cart
event... - ...which triggers
updateCart
method in Vue instance
<product @add-to-cart=“updateCart”></product>
Vue.component(‘product’,{
methods: {
addToCart: function() {
this.$emit(‘add-to-cart’)
}
},
template: `
<button @click=“addToCart”>Add to cart</button>
`
}
methods: {
updateCart() {
this.cart += 1;
}
}