关于vue子组件向父组件通信的一点理解

   

{{total}}

     //这两个组件的total是共享的，counter是分开的

    //父组件？监听increment事件，触发后调用父组件的incrementTotal方法

     

   

Vue.component('button-counter', {

    //子组件模板监听点击事件，触发后调用子组件自身incrementCounter方法

     template:'{{counter}}',   

    data:function(){

       return{

        counter:0

    }

  },

  methods: {

    incrementCounter:function(){

    this.counter +=1

    this.$emit('increment')    //子组件通过emit触发父组件中的increment事件

     }

  },

})

newVue({

el:'#counter-event-example',

  data: {

    total:0

  },

  methods: {

    incrementTotal:function(){

    this.total +=1

    }

  }

})