SOURCE

console 命令行工具 X clear

                    
>
console
Vue.component("my-component", {
  props:["text"],
  template: "<p><span>{{ text }}</span> <button @click='btnC'>{{ counter }}</button></p>",
  data () {
    return {
      counter: 0
    }
  },
  methods: {
    btnC () {
      this.counter += 1
      this.$emit('increment')
    }
  }
})

new Vue({
  el:"#app",
  data: {
    total: 0,
    msg:[
      {text:"第一个"},
      {text:"第二个"}
    ]
  },
  methods: {
    incrementTotal () {
      this.total += 1
    },
    test () {
      alert(1)
    }
  }
})
<div id="app">
  <p>{{ total }}</p>
  
  <!-- 不加.native 点击无法触发test方法 -->
  <my-component v-for="todo in msg" v-bind="todo" v-on:click.native="test" v-on:increment="incrementTotal"></my-component>
  <!-- <my-component v-for="todo in msg" :text="todo.text" @increment="incrementTotal"></my-component> -->
</div>