vue這個里面誰是父組件誰是子組件？

父組件是counter-event-example嗎？ 子組件是button-counter嗎？counter-event-example不就是一個div標簽嗎 哪里是組件了？v-on是在監(jiān)聽嗎？如果是這樣的話不是自己監(jiān)聽自己嗎？一直分不清哪個是父組件哪個是子組件也搞不清emit的用法怎么辦？

<div id="counter-event-example">
  <p>{{ total }}</p>
  <button-counter v-on:increment1="incrementTotal"></button-counter>
  <button-counter v-on:increment1="incrementTotal"></button-counter>
</div>


Vue.component('button-counter', {
  template: '<button v-on:click="increment">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    increment: function () {
      this.counter += 1 //組件模板中的counter
      this.$emit('increment1')//觸發(fā)自定義事件，這里的參數(shù)是自定義事件名稱
    }
  },
})
new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1  //父實例下的total
    }
  }
})