vue component

index.html

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

<div id="fruits-counter">
  <div v-for="fruit in fruits">
    {{ fruit.name }}: <counter-button v-on:increment="incrementCartStatus()"></counter-button>
  </div>
  <p>合計: {{ total }}</p>
</div>

<script>
var counterButton = Vue.extend({
  template: '<span>{{ counter }}個<button v-on:click="addToCart">追加</button></span>',
  data: function() {
    return {
      counter: 0
    }
  },
  methods: {
    addToCart: function() {
      this.counter += 1
      this.$emit('increment')
    }
  }
})

new Vue({
  el: '#fruits-counter',
  components: {
    'counter-button': counterButton
  },
  data: {
    total: 0,
    fruits: [
      { name: '梨' },
      { name: 'イチゴ' },
    ]
  },
  methods: {
    incrementCartStatus: function() {
      this.total += 1
    }
  }
})
</script>