使用v-on绑定自定义事件

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

<script type="text/javascript" src="./vue.js"></script>

<script>
    Vue.component('button-counter', {
        template: '<button v-on:click="incrementCounter">{{ counter }}</button>',
        data: function () {
            return {
              counter: 0
            }
        },
        methods:{
            incrementCounter:function(){
                this.counter+=1
                this.$emit('increment')
            }
        }
    })

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