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函数？