VueJS Component Communication

by PlĂ­nio Naves

HTML

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
   <p>{{ total }}</p>
   <button-counter @increment="total++"></button-counter>
   <button-counter @increment="total++"></button-counter>
</div>

JavaScript

Vue.component('button-counter', {
	template: `<button @click="increment">{{ counter }}</button>`,
  data() {
  	return {
      counter: 0
    }
  },
  methods: {
  	increment: function() {
    	this.counter++;
      this.$emit('increment');
    }
  }
});


new Vue({
	el: '#app',
  data: {
  	total: 0
  }
});