Vue2 child to parent via "func props"

Vue2 child to parent communication via "func passed as props"

by Luke

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="counter-event-example">
  <p>{{ total }}</p>
  <button-counter v-bind:increment="incrementTotal"></button-counter>
  <button-counter v-bind:increment="incrementTotal"></button-counter>
</div>

JavaScript

Vue.component('button-counter', {
  template: '<button v-on:click="handleClick">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  props: ['increment'],
  methods: {
    handleClick: function () {
      this.counter += 1
      this.increment()
    }
  },
})

new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
})