vue.js自定义事件如何触发的？

Question

<script type="x/template" id="child-template">  <input v-model="msg">  <button v-on:click="notify">Dispatch Event</button></script><div id="events-example" class="demo">  <p>Messages: {{ messages | json }}</p>  <child v-on:child-msg="handleIt"></child></div><script>    Vue.component('child', {      template: '#child-template',      data: function () {        return { msg: 'hello' }      },      methods: {        notify: function () {          if (this.msg.trim()) {            this.$dispatch('handleIt', this.msg);            this.msg = ''          }        }      }    })    var parent = new Vue({      el: '#events-example',      data: {        messages: []      },      events: {        'handleIt': function (msg) {          this.messages.push(msg)        }      }    })</script>如上代码中，自定义的child-msg事件是如何触发的并最终执行了handleIt函数？