vue的$emit的详解

网上很多教程关于$emit的使用，但是解释都模糊不清，什么父子传递？？

代码1：

<template>
  <div class="tab-control">
    <div class="tab-control-item"
         :class="{active: currentIndex === index}"
         @click="itemClick(index)"
         v-for="(item, index) in titles">
      <span>{{item}}</span>
    </div>
  </div>
</template>

methods: {
      itemClick: function (index) {
        // 1.改变currentIndex
        this.currentIndex = index;

        // 2.发出事件
        this.$emit('itemClick', index)
        }
}

代码2：

 <tab-control @itemClick="tabClick"
                     :titles="['流行', '新款', '精选']"
                     ref="tabControl"></tab-control>

methods: {
		  tabClick(index) {
		    switch (index) {
          case 0:
            this.currentType = POP
            break
          case 1:
            this.currentType = NEW
            break
          case 2:
            this.currentType = SELL
            break
        }
      },

前提：知道$emit 是触发当前组件的事件。附上官方api截图

看懂三步，解决$emit什么子传父问题

1. <div class="tab-control-item"/> 中的@click，是设置点击监听，处理函数是<div class="tab-control">中的itemClick(index)函数；
2. itemClick函数的最后this.$emit('itemClick', index)，是触发事件名为itemClick的事件。而itemClick是属于tab-control；
3. 代码2，<tab-control @itemClick="tabClick",设置事件名为itemClick的事件，处理函数为（代码2下面）methods中的tabClick(index)函数。