逆战Vue自定义事件

示例代码和demo:

Vue.component('button-counter', {
  template: '<button v-on:click="increment">{{counter}}</button>',
  data: function () {
    return {
      counter: 0
    }
  },

  methods: {
    increment: function () {
      this.counter += 1
      this.$emit('increment-event')
    }
  }
}) 

new Vue({
  el: '#app',
  data: {
    totalCounter: 0
  },

  methods: {
    total_increment: function () {
      this.totalCounter += 1
    }
  }
})

模板HTML部分：

<div id='app'>
      <button>{{ totalCounter }}</button>
      </br>
      <button-counter v-on:increment-event='total_increment'></button-counter>
      <button-counter v-on:increment-event='total_increment'></button-counter>
</div>

demo:

下面两个按钮是两个相同的子组件，并和上面那个按钮共同组成了父组件。

当点击任意一个子组件的按钮，使其加1，都会使得父组件+1,最终：父组件的数值 = 子组件的数值之和

点击下方左侧按钮

点击下方右侧按钮

自定义事件的原理

通过$emit(event)触发一个自定义事件

然后通过$on(event,callback) 去执行对应的callback(回调函数)

但$on不能在父组件中监听子组件抛出的事件，所以我们要做到这一点，可以在父组件的模板中使用到子组件的时候，直接用v-on绑定 （和$on作用效果一致）

<button-counter v-on:increment-event='total_increment'></button-counter>

自定义事件中比较重要的是这一段：

increment: function () {
      this.counter += 1
      this.$emit('increment-event')
  }

事件的运用主要是：利用事件和函数绑定，从而在事件触发的时候能执行相应的函数，所以对于自定义事件，我们要解决的问题就是，“这个事件在什么时候触发” 在上面的代码中，触发事件的时间是执行this.counter += 1 的时候

自定义事件的作用

• 作用1 ——“重新定义”了事件监听机制的范围 在某一个特定的时间节点（或场景）做某个操作，例如调用一个函数。
  而定位这个“时间节点”或“场景”的，就是事件

• 作用2 ——使得父子组件权责明确
  1.父组件不知道子组件究竟做了什么（increment事件触发前的处理）
  2.父组件只需要完成它的任务即可：在increment事件触发的时候执行对应的函数